国家  china

Wijmo5 FlexGrid教程(3)- 实现增加删除功能

对于表格控件,很基本的操作就是增加删除,在WinForm平台下我们能够很轻易地实现。那么基于HTML5,我们又要怎么去实现这个功能呢?本文就介绍flexgrid的基本操作:增加删除。

在学习增加和删除之前,我们需要了解wijmo5的另一个重要的概念:CollectionView。它由ICollectionView接口继承而来,用标准的JavaScript数组提供数据。

由于CollectionView类继承自以下三个接口:

  • ICollectionView
  • IEditableCollectionView
  • IPagedCollectionView

因此就能够容易的获取当前的数据,排序,过滤,分组,添加删除,以及分页。

 

有了这个基础,我们就来介绍利用它继承的IEditableCollectionView接口,来实现增加和删除。

增加

1.addNew

通过CollectionView的addNew方法,可以添加一个新的item到集合。

这个方法没有参数,在添加新的数据后,还需要使用commitNewcancelNew的方法进行数据的提交或是取消。

典型的使用方法:

// 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提供了removeremoveAt方法,可以根据项目删除指定的项目,也可以根据项目的索引删除项目。

使用CollectionView.currentItem就可以得到当前选择的项目,因此删除选择项目的代码参考:

var cv = grid.itemsSource;

            cv.remove.remove(cv.currentItem);
            cv.refresh();

 

根据本文的介绍,就能很容易的对flexgrid进行增加和删除。

文本的源代码下载:

flexgrid_addremove.zip (73.05 kb)

 

如果你对Wijmo5感兴趣,可以到如下链接下载:

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

 

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

 

请参考Wijmo5技术文章汇总

 《wijmo5 flexgrid基础教程》系列文章

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/wijmo_flexgrid_addremove.aspx

不允许评论