自定义Wijmo 表格过滤器

WijGrid 提供了内置的过滤功能,开发者们不需要编写大量的代码来实现此功能。仅需要设置 ShowFilter属性值为 True,条件过滤器将根据每一列的数据类型呈现。

然而,在很多情况下,开发者想根据每个项目的需求来自定义过滤器。例如,您不想为“国家”这一列显示‘Contains’作为过滤选项等。别担心!

本篇博客中,我已经尝试过了,将会分享几种不同的关于在WijGrid中自定义过滤器的方法。最常见的自定义方式如下:

1. 从过滤器下拉菜单中删除内置选项。

2. 在过滤器下拉菜单中添加自定义选项。

3. 根据过滤器赋值。

 

从过滤器下拉菜单中删除内置选项

通常情况下,WijGrid会根据列的数据类型显示一些选项,如为字符串类型列 Begins With,Contains等,为数字列显示Equals,Greater Than等选项。您可以通过简单的处理“filterOperatorsListShowing”事件,根据项目需求来自定义和选择显示的选项。仅显示“Equals”属性的代码如下所示:

 // Limit the filters that will be shown to the "Equals" filter operator
 $("#element").wijgrid({
 filterOperatorsListShowing: function (e, args) {
 args.operators = $.grep(args.operators, function(op) {
 return op.name === "Equals" || op.name === "NoFilter";
 }
 }
 });

更多详细信息,请点击此链接

在过滤器下来菜单中添加自定义选项。

您可以通过创建WijGrid自定义过滤器操作符为最终用户提供自定义过滤选项,包括数字列也可以设置。脚本代码如下所示:

 var fop_Even = {
 name: "Even",
 arity: 1,
 applicableTo: ["number", "currency"],
 operator: function(dataVal) {
 return dataVal % 2 === 0;
 }
 }
 $("#demo").wijgrid({
 showFilter: true,
 allowSorting: true,
 customFilterOperators: [ fop_Even ],
 columns: [ {}, { dataType: "number" } ]
 });

您可以通过以下路径,获得完整的示例程序(首先需要下载该Wijmo 包):\Samples\WidgetExplorer\samples\grid\ custom-filter-operators.html

基于过滤器的值

Wijmo 提供了单独过滤器 js i.e WijFilter用于创建 Excel如过滤器对话框和用于实现Wijmo Grid的wijGrid js的可扩展版本。请观看以下视频,注意展示的内容:

clip_image002

该示例程序和js文件都包含于该路径下的 Wijmo 包:\Samples\WidgetExplorer\samples\filter

可以随时给我分享您的反馈信息,或者如果在该博客中我遗漏了什么重要的内容,都可以反馈给我。