自定义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的可扩展版本。请观看以下视频,注意展示的内容:
该示例程序和js文件都包含于该路径下的 Wijmo 包:\Samples\WidgetExplorer\samples\filter。
可以随时给我分享您的反馈信息,或者如果在该博客中我遗漏了什么重要的内容,都可以反馈给我。