$("#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 });
原文地址:https://www.cnblogs.com/m110/p/9435687.html
时间: 2024-10-07 13:56:12