kendo grid的过滤filter

　　kendo是一套强大方便的前端解决方案，而且新版还可以与angularjs集成，项目中就使用了一些kendo的控件，比如grid表格。

　　grid提供了过滤功能，但中文网站缺少这方面的资料，在这里整理一下kendo grid怎么使用过滤。

　　下面代码包含了grid的过滤所有涉及的所有设置，以这个完整的例子，加上注释讲解其使用方法：

  1 <div id="grid"></div>

  2 <script>

  3     $("#grid").kendoGrid({

  4         columns: [

  5             {

  6                 field: "name",

  7                 //filterable对象，过虑功能的总开关，值为true时开启，默认值为true，只针对当前列

  8                 filterable: {

  9                     //过滤显示的单元格，只有当mode的值为row时才可用

 10                     cell: {

 11                         enabled: true,//是否可用的开关

 12 

 13                         //自动完成数据源

 14                         dataSource: new kendo.data.DataSource({

 15                             data: [

 16                                 { someField: "Jane" },

 17                                 { someField: "Jake" },

 18                                 { someField: "John" }

 19                             ]

 20                         }),

 21                         dataTextField: "someField",//自动完成要显示的数据源列，与上面配合使用

 22                         delay: 1500,//自动完成激活的时间延迟

 23                         minLength: 3,//自动完成激活的最少字符数，当该格式（DataSource中schema中设置）为string时

 24                         suggestionOperator: "contains",//自动完成选择时的默认操作

 25 

 26                         inputWidth: 100,//条件输入框的宽度，受所在列宽限制

 27 

 28                         showOperators: false,//是否显示过滤按钮

 29                         operator: "contains",//过滤按钮的默认操作

 30                         //过滤的显示模板，element是过滤单元格，在里面加其他元素，dataSource是grid的dataSource，但是只包含数据，不像在grid中使用时带有自动赋予的唯一值，自动完成也是可以使用的

 31                         template: function (args) {

 32                             // create a DropDownList of unique values (colors)

 33                             args.element.kendoDropDownList({

 34                                 dataSource: args.dataSource,

 35                                 dataTextField: "color",

 36                                 dataValueField: "color",

 37                                 valuePrimitive: true

 38                             });

 39                             // or

 40                             // create a ColorPicker

 41                             // args.element.kendoColorPicker();

 42                         },

 43                         //是一个方法function，或者kendo的组件

 44                         ui: "datetimepicker" // use Kendo UI DateTimePicker

 45                         //ui: function (element) {

 46                         //    element.kendoDateTimePicker(); // initialize a Kendo UI DateTimePicker

 47                         //}

 48                     }

 49                 }

 50             },

 51             { field: "age" }

 52         ],

 53         //filterable对象，过虑功能的总开关，值为true时开启，默认值为false，控制所有列

 54         filterable: {

 55             extra: false,//是否双过滤条件，默认为true

 56             //过滤弹窗上显示的文字，都是可定制的

 57             messages: {

 58                 info: "Filter by: ",//顶端提示信息

 59                 and: "and",

 60                 or: "or",

 61                 filter: "Apply filter",//过滤按钮

 62                 clear: "Clear filter",//清空按钮

 63 

 64                 isFalse: "False",//过滤条件radio按钮的显示文字，当field设置type（DataSource中的schema中设置）: "boolean"时，可设此值

 65                 isTrue: "True",//同上

 66 

 67                 selectValue: "-Select value-",//过滤条件下拉按钮dropdownlist首项的显示文字，当field的值为枚举型时，设置values: [{ text: Beverages", value: 1 },{ text: "Food", value: 2 },]，可设此值

 68 

 69                 cancel: "Cancel",//返回按钮的显示文字，只有当grid的option设置mobile: "phone"时，可设此值

 70                 operator: "Operator",//选择操作前标签的显示文字，条件与上同

 71                 value: "Value",//值输入前标签的显示文字，条件与上同

 72 

 73                 //条件运算符的显示文字，具体使用取决于field设置的type

 74                 operators: {

 75                     //字符串型

 76                     string: {

 77                         eq: "Is equal to",

 78                         neq: "Is not equal to",

 79                         startswith: "Starts with",

 80                         contains: "Contains",

 81                         doesnotcontain: "Doesn't contain",

 82                         endswith: "Ends"

 83                     },

 84                     //数值型

 85                     number: {

 86                         eq: "Equal to",

 87                         neq: "Not equal to",

 88                         gte: "Greater than or equal to",//大于等于

 89                         gt: "Greater than",//大于

 90                         lte: "Less than or equal to",//小于等于

 91                         lt: "Less than"//小于

 92                     },

 93                     //日期型

 94                     date: {

 95                         gt: "After",

 96                         lt: "Before",

 97                         eq: "Equal",

 98                         neq: "Not equal",

 99                         gte: "After or equal to",

100                         lte: "Before or equal to"

101                     },

102                     //枚举型，

103                     enums: {

104                         eq: "Equal to",

105                         neq: "Not equal to"

106                     }

107                 },

108 

109                 mode: "menu"//过滤的显示方式，可选值有"row"、"menu"、"menu, row"，row是标题行下加过滤单元格，menu是菜单

110             }

111         },

112         dataSource: {

113             data:[

114                 { name: "Jane Doe", age: 30 },

115                 { name: "John Doe", age: 33 }],

116             schema: {

117               model: {

118                 fields: {

119                   name: { type: "string" }

120                 }

121               }

122             }

123         }

124     });

125 </script>        

　　上面代码可以出，grid的过滤主要加在columns和filterable中，columns可对每列进行单独控制，而filterable则对所有列进行控制。

　　向后台传递过滤条件时，在grid option设置的getData方法中第一个参数中带有过滤条件，可在向后台传递前进行其他操作。