zoukankan      html  css  js  c++  java
  • 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     });
  • 相关阅读:
    简单的模板解析函数
    HTML通过事件传递参数到js 二 event
    HTML通过事件传递参数到js一
    通过this获取当前点击选项相关数据
    LeetCode 20. 有效的括号(Valid Parentheses)
    LeetCode 459. 重复的子字符串(Repeated Substring Pattern)
    LeetCode 14. 最长公共前缀(Longest Common Prefix)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    LeetCode 171. Excel表列序号(Excel Sheet Column Number) 22
    LeetCode 665. 非递减数列(Non-decreasing Array)
  • 原文地址:https://www.cnblogs.com/m110/p/9435687.html
Copyright © 2011-2022 走看看