Wijmo5 Flexgrid基础教程：增长和删除

<Wijmo Enterprise下载>

对于表格控件，很基本的操做就是增长和删除，在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进行增长和删除。

文本的源代码下载：flexgrid_addremove.zip (73.05 kb)

PS: 关于ComponentOne，这些产品你能够关注>>

本文转载自葡萄城