Wijmo5 Flexgrid基础教程：简单过滤FlexGridFilter-控件新闻-慧都网

Wijmo5 Flexgrid基础教程：简单过滤FlexGridFilter

转帖|使用教程|编辑：龚雪|2016-02-06 09:16:16.000|阅读 685 次

概述：C1Flexgrid在其他的平台（WinForm, WPF)都支持了表头过滤，那么wijmo5 flexgrid是否也支持？本文就来介绍如何简单的实现wijmo5 flexgrid的过滤。

相关链接：

C1Flexgrid在其他的平台（WinForm, WPF)都支持了表头过滤，那么wijmo5 flexgrid是否也支持？本文就来介绍如何简单的实现wijmo5 flexgrid的过滤。

对于flexgrid控件的过滤操作，就需要FlexGridFilter扩展（wijmo.grid.filter.js）。这个过滤操作会出现在表格的column headers。点击过滤的图标，然后就会展示一个基于值的过滤界面。为了在flexgrid控件上实现一个类似Excel样式的过滤，就需要创建FlexGridFilter的实例。首先需要复制文件（wijmo.grid.filter.js）到本地文件夹，然后在页面引用这个文件。

<script src="wijmo.grid.filter.min.js" type="text/javascript"></script>

然后使用扩展创建FlexGridFilter的实例，然后传递表格作为参数给构造方法。代码参考：

// create FlexGrid
var flex = new wijmo.grid.FlexGrid('#gridElement');
// enable filtering on the FlexGrid
var filter = new wijmo.grid.filter.FlexGridFilter(flex);

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