本帖最后由 断天涯大虾 于 2016-10-20 09:52 编辑
在本系列的前两篇文章中，我们讲述了如何使用FlexGrid表格控件，实现项目中的数据绑定和数据对应功能。 那么如何实现数据处理的基本操作呢？如：增加和删除。 本文就来为大家讲述实现增加和删除功能。 对于表格控件，很基本的操作就是增加删除，在WinForm平台下我们能够很轻易地实现。
那么基于HTML5，我们又要怎么去实现这个功能呢？本文就介绍flexgrid的基本操作：增加删除。
在学习增加和删除之前，我们需要了解wijmo5的另一个重要的概念：CollectionView。它由ICollectionView接口继承而来，用标准的JavaScript数组提供数据。
由于CollectionView类继承自以下三个接口： - ICollectionView
- IEditableCollectionView
- IPagedCollectionView
因此就能够容易的获取当前的数据，排序，过滤，分组，添加删除，以及分页。
有了这个基础，我们就来介绍利用它继承的IEditableCollectionView接口，来实现增加和删除。
增加
1.addNew通过CollectionView的addNew方法，可以添加一个新的item到集合。 这个方法没有参数，在添加新的数据后，还需要使用commitNew和cancelNew的方法进行数据的提交或是取消。 典型的使用方法： - // create the new item, add it to the collection
- var newItem = view.addNew();
- // initialize the new item
- newItem.id = getFreshId();
- newItem.country= 'Chinese';
- // commit the new item so the view can be refreshed
- view.commitNew();
2.CollectionView.Items.push通过CollectionView.Items拿到当前的数据，并且通过push添加一个新的数据。 代码参考： - var cv = grid.itemsSource;
- var data = cv.items;
- data.push({
- id: cv.items.length,
- country: countries[i % countries.length]
- });
- cv.refresh();
删除CollectionView提供了remove和removeAt方法，可以根据项目删除指定的项目，也可以根据项目的索引删除项目。 使用CollectionView.currentItem就可以得到当前选择的项目，因此删除选择项目的代码参考： - var cv = grid.itemsSource;
- cv.remove.remove(cv.currentItem);
- cv.refresh();
根据本文的介绍，就能很容易的对flexgrid进行增加和删除。
| 
陕公网安备：61019002000258 |
隐私政策 |
网站地图