配色: 字号:
Wijmo5 FlexGrid教程(10)- 实现Excel样式过滤功能
2016-10-20 | 阅:  转:  |  分享 
  
Excel样式过滤功能

C1FlexGrid在其他的平台(WinForm,WPF)都支持了表头过滤,那么

Wijmo5FlexGrid是否也支持?

本文就来介绍如何简单的实现Wijmo5FlexGrid的过滤。



对于FlexGrid控件的过滤操作,就需要FlexGridFilter扩展

(wijmo.grid.filter.js)。

这个过滤操作会出现在表格的columnheaders。点击过滤的图标,然后就会

展示一个基于值的过滤界面。

为了在flexgrid控件上实现一个类似Excel样式的过滤,就需要创建

FlexGridFilter的实例。

首先,需要复制文件(wijmo.grid.filter.js)到本地文件夹,然后在页面引用这

个文件。



然后使用扩展创建FlexGridFilter的实例,然后传递表格作为参数给构造方

法。

代码参考:

//createFlexGrid

varflex=newwijmo.grid.FlexGrid(''#gridElement'');

//enablefilteringontheFlexGrid

varfilter=newwijmo.grid.filter.FlexGridFilter(flex);



一旦设置这个,就会在ColumnHeader的位置出现过滤的图标,如下:



以上就是实现Excel样式过滤的具体步骤。

献花(0)
+1
(本文系zenmshuo首藏)