国家  china

Wijmo5 FlexGrid教程(16)- 实现自定义筛选条件功能

在之前的文章中,我们学习了如何给wijmo5 flexgrid添加过滤:(十)过滤

本文就在之前的基础上,来介绍如何自定义过滤的筛选条件。

首先,我们添加如下引用,使得界面中文化:

   <script src="js/wijmo.culture.zh.min.js" type="text/javascript"></script>

 

这个时候当我们使用FlexGridFilter的过滤,过滤的界面会呈现中文。

如图:

image

 

在这个基础上,我们来看看条件界面的操作符有哪些。

如图:

image

通过wijmo.culture.FlexGridFilter就能获取到所有的筛选条件,并且进行重新的定义。

代码参考:

    var filter = wijmo.culture.FlexGridFilter,
                 Operator = wijmo.grid.filter.Operator;

分别针对String,Number等不同类型修改筛选条件。

代码:

  filter.stringOperators = [
             { name: '缺省', op: null },
             { name: '等于', op: Operator.EQ },
             { name: '不等于', op: Operator.NE },
             { name: '大于', op: Operator.GT }, // added
             { name: '小于', op: Operator.LT }, // added
             //{ name: 'Begins with', op: Operator.BW },
             //{ name: 'Ends with', op: Operator.EW },
             //{ name: 'Has', op: Operator.CT },
             //{ name: 'Hasn\'t', op: Operator.NC }
             ];
             filter.numberOperators = [
                 { name: '缺省', Operator: null },
                 { name: '等于', op: Operator.EQ },
                 { name: '不等于', op: Operator.NE },
                 { name: '大于', op: Operator.GT },
                 ////{ name: 'Is Greater than or equal to', op: Operator.GE },
                 { name: '小于', op: Operator.LT },
                 //{ name: 'Is Less than or equal to', op: Operator.LE }
             ];
             filter.dateOperators = [
                     { name: '(not set)', op: null },
                     { name: 'Same', op: Operator.EQ },
                     { name: 'Earlier', op: Operator.LT },
                     { name: 'Later', op: Operator.GT }
             ];
             filter.booleanOperators = [
                     { name: '(not set)', op: null },
                     { name: 'Is', op: Operator.EQ },
                     { name: 'Isn\'t', op: Operator.NE }
             ];

 

这个时候,再打开筛选条件,我们发现发生了变化。

如图:

image

筛选条件已经按照我们的定义显示。

 

本文的源码请下载:

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

请参考Wijmo5技术文章汇总

《wijmo5 flexgrid基础教程》系列文章

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/flexgrid_customfilter.aspx

不允许评论