请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-10-18 18:14  /   查看:3264  /  回复:0
本帖最后由 断天涯大虾 于 2016-10-20 09:52 编辑

在本系列的前两篇文章中,我们讲述了如何使用FlexGrid表格控件,实现项目中的数据绑定和数据对应功能。
那么如何实现数据处理的基本操作呢?如:增加和删除。
本文就来为大家讲述实现增加和删除功能。
对于表格控件,很基本的操作就是增加删除,在WinForm平台下我们能够很轻易地实现。

那么基于HTML5,我们又要怎么去实现这个功能呢?本文就介绍flexgrid的基本操作:增加删除。

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

由于CollectionView类继承自以下三个接口:
  • ICollectionView
  • IEditableCollectionView
  • IPagedCollectionView
因此就能够容易的获取当前的数据,排序,过滤,分组,添加删除,以及分页。

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

增加
1.addNew
通过CollectionView的addNew方法,可以添加一个新的item到集合。
这个方法没有参数,在添加新的数据后,还需要使用commitNewcancelNew的方法进行数据的提交或是取消。
典型的使用方法:
  1. // create the new item, add it to the collection
  2. var newItem = view.addNew();
  3. // initialize the new item
  4. newItem.id = getFreshId();
  5. newItem.country= 'Chinese';
  6. // commit the new item so the view can be refreshed
  7. view.commitNew();
复制代码

2.CollectionView.Items.push
通过CollectionView.Items拿到当前的数据,并且通过push添加一个新的数据。
代码参考:
  1. var cv = grid.itemsSource;
  2.             var data = cv.items;

  3.             data.push({
  4.                 id: cv.items.length,
  5.                 country: countries[i % countries.length]
  6.             });
  7.             cv.refresh();
复制代码

删除
CollectionView提供了removeremoveAt方法,可以根据项目删除指定的项目,也可以根据项目的索引删除项目。
使用CollectionView.currentItem就可以得到当前选择的项目,因此删除选择项目的代码参考:
  1. var cv = grid.itemsSource;
  2. cv.remove.remove(cv.currentItem);
  3. cv.refresh();
复制代码
根据本文的介绍,就能很容易的对flexgrid进行增加和删除。

免费试用
FlexGrid 包含在全能控件套包 ComponentOne Studio Enterprise 中。下载试用,请点击:
http://www.gcpowertools.com.cn/products/download.aspx?pid=2

了解更多详情,请访问官网:
http://www.gcpowertools.com.cn/products/componentone_studio_winform_flexgrid.htm

欢迎加入ComponentOne 官方QQ交流群:415971774与数百位开发精英即时交流,还可参加每周的视频公开课,快速上手。
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部