• kendo grid过滤


     $("#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     });
  • 相关阅读:
    about paper
    虚拟环境部署过程中遇到的问题
    201621123028《Java程序设计》第4周学习总结
    Linux C 数据结构 ->单向链表<-(~千金散尽还复来~)
    Spring 解析(获取)URL 参数
    【简单】罗马数字转整数
    【简单】字符串字母数统计
    MongoDB 集合(collection)常用方法 (Method)
    python中group()函数的用法
    requests库
  • 原文地址:https://www.cnblogs.com/m110/p/9435687.html
Copyright © 2020-2023  润新知