$("#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 });