自定义Wijmo 表格过滤器

本篇博客中，我已经尝试过了，将会分享几种不同的关于在WijGrid中自定义过滤器的方法。最常见的自定义方式如下：1. 从过滤器下拉菜单中删除内置选项。2. 在过滤器下拉菜单中添加自定义选项。3. 根据过滤器赋值。

发布于 2014/10/28 00:00

WijmoJS

自定义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" } ]
 });