彩票走势图

Wijmo5 Flexgrid基础教程:增加和删除

转帖|使用教程|编辑:龚雪|2016-01-28 09:20:22.000|阅读 785 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

<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进行增加和删除。

文本的源代码下载:

PS: 关于ComponentOne,这些产品你可以关注>>
本文转载自
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!优惠详情点击查看>>
新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>

标签:JavaScript HTML5UI工具包

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP