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方法中第一個參數中帶有過濾條件，可在向後臺傳遞前進行其餘操做。