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     });

原文地址:https://www.cnblogs.com/m110/p/9435687.html

时间: 2024-10-07 13:56:12

kendo grid过滤的相关文章

kendo grid的过滤filter

kendo是一套强大方便的前端解决方案,而且新版还可以与angularjs集成,项目中就使用了一些kendo的控件,比如grid表格. grid提供了过滤功能,但中文网站缺少这方面的资料,在这里整理一下kendo grid怎么使用过滤. 下面代码包含了grid的过滤所有涉及的所有设置,以这个完整的例子,加上注释讲解其使用方法: 1 <div id="grid"></div> 2 <script> 3 $("#grid").kend

Kendo Grid:将Edit button 移到grid view 得顶部

因为kendo grid 得toolbar 里不包括Edit button,所以我们要先用template 创建一个自定义得edit button,然后再对这个button实现edit 功能. <script id="template" type="text/x-kendo-template">/'      <a class="k-button" href="javascript:void(0)" oncl

Kendo Grid控件中将枚举值转为枚举名显示

我们在开发过程中经常会遇到需要将枚举值转换成名称进行显示的情况.如下我们有这样一个数据源对象: var users = [ {id: 1, name: "similar1", status: 1}, {id: 2, name: "similar2", status: 2} ]; 其中字段 status 代表的是用户的状态, 1 代表 “可用”, 2 代表 “禁用”.我们使用 kendo grid 常规配置如下: columns: [ { field: "i

.Net Mvc4 Kendo Grid Demo

看见人家项目中用到了Kendo Grid组件,感觉不错,于是就没有压制住自己内心的好奇心!嘿嘿,咱们开始吧,步骤很简单,理解起来也很容易. 首先我们创建一个空的ASP.NET MVC 4 Web 应用程序,如下图 1所示: 图 1 新建MVC项目 2. 接下来通过NuGet包管理工具来安装下面两个包: 3. 然后开始我们的编码工作: ->首先是HomeController.cs文件: public class HomeController : Controller { // // GET: /H

Kendo Grid editing 自定义验证报错提示

Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件. 今天开始就对项目里使用的kendo控件技巧做记录,有个别错误希望大家不吝指出,谢谢. 首先就是Grid控件编辑是,验证错误时弹出的提示居然是中文加字段名字,如下图.抓狂啊!!请问这样的低级的提示能拿得出手吗? 这样的提示

kendo grid 添加序号

columns.Bound(m => m.Id).ClientTemplate("#= getRowNumber() #").Title("序号").Width(80); <script> var rowNumber = 0; function onDataBinding() { var grid = $('#ReportLogGrid').data('kendoGrid'); rowNumber = (grid.dataSource.page()

Kendo UI Grid 模型绑定

开篇 接触 Asp.net MVC 时间较长的童鞋可能都会了解过模型绑定(Model Binding),而且在一些做 Web 项目的公司或是Team面试中也经常会被问到.项目中有很多 Action 中都使用了自定义的模型绑定,但是业务逻辑太过复杂不适合做为例子与大家分享,而今天在做一个 Kendo UI 的功能时觉得可以用 Kendo UI 做为例子与大家分享与探讨一个典型的 Model Binding 的过程. 写的比较随性,欢迎大家讨论及拍砖! 背景介绍 Kendo UI: 它是一个非常出名

kendo ui grid 汉化

加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" /&g

kndo grid:通过checkbox 实现多选和全选

在kendo grid 里要想通过checkbox 实现多选和权限,我们就要通过templeate 和input 标签对kendo grid 进行自定义 1. 在column 里面加入一列checkbox { title: " <input id='checkAll' type='checkbox' id='chkSelectAll' onclick='selectAllRow(this)' /> ", template: "<input type='che