数据管理必看!Kendo UI for jQuery过滤器概述
时间:2019-10-31
本文章向大家介绍数据管理必看!Kendo UI for jQuery过滤器概述,主要包括数据管理必看!Kendo UI for jQuery过滤器概述使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
Kendo UI Filter小部件是一个统一的控件,用于筛选具有数据源的数据绑定组件。
Filter的用户界面对于没有内置UI进行筛选但需要提供筛选器选项的数据绑定组件很有用,例如ListView,Chart和Scheduler。 您可以添加或删除用于过滤数据的字段,并为每个字段选择过滤器的全局逻辑(AND或OR)和过滤器运算符(例如,包含或等于)。您可以通过内置按钮或API调用应用过滤,还可以选择名称,以这些名称显示给用户并本地化过滤器操作符和消息。
初始化Filter
要使用过滤器,请使用一个空的"div"元素,并在初始化脚本中提供其设置。
下面的示例演示如何:
- 将Filter绑定到数据源。
- 在列表视图中显示过滤的数据。
- 在字段中使用易于理解的名称。
- 设置初始过滤器表达式。
注意:
- 您可以使用远程数据源而不是本地数据数组。 在本示例中,为简洁起见,使用了本地数组。
- 不需要提供字段,因为过滤器可以从数据源中提取它们。 如果您未在过滤器设置中设置字段,则会向用户显示实际的字段名称,而不是可读的标签。如果您在过滤器设置中设置了字段,则它们必须与数据源的架构匹配。
- 不需要提供初始过滤器表达式,此功能对于还原以前的状态很有用。
<div id="filter"></div><ul id="listView"></ul> <script type="text/x-kendo-template" id="item"> <li> <strong>#= name #</strong>, aged #= age #, is on vacation: #= isOnLeave # </li> </script> <script> $(document).ready(function () { var dataSource = new kendo.data.DataSource({ data: [ { name: "Jane Doe", age: "25", isOnLeave: false }, { name: "John Doe", age: "33", isOnLeave: true }, { name: "John Smith", age: "37", isOnLeave: true }, { name: "Nathan Doe", age: 42, isOnLeave: false } ], schema: { model: { fields: { name: { type: "string" }, age: { type: "number" }, isOnLeave: { type: "boolean" } } } } }); $("#filter").kendoFilter({ dataSource: dataSource, expressionPreview: true, // Shows a text preview of the filter expression. applyButton: true, // Shows the built-in Apply button. fields: [ // Defining the fields is not mandatory. Otherwise, they will be taken from the data source schema. // If you define the fields, their names and types must match the data source definition. { name: "name", type: "string", label: "Name" }, { name: "age", type: "number", label: "Age" }, { name: "isOnLeave", type: "boolean", label: "On Vacation" } ], expression: { // Defining an initial filter expression is not required. logic: "and", filters: [ { field: "age", value: 30, operator: "gte" }, { field: "name", value: "Doe", operator: "contains" } ] } }).data("kendoFilter").applyFilter(); // Chain the method call to immediately apply filtering after the widget initialization because an initial filter is set. $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#item").html()) }); }); </script>
功能和特点
- 设置运算符
- 保持状态
- 全球化
引用现有实例
要引用现有的Filter实例,请使用jQuery.data()方法。 建立引用后,请使用Filter API来控制其操作。
var filter = $("#theFilter").data("kendoFilter");
了解最新Kendo UI最新资讯,请关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯
原文地址:https://www.cnblogs.com/AABBbaby/p/11770900.html
- Golang语言 Cookie的使用
- Golang 语言调用动态库实现OpenGL及windows的API编程
- MySQL中的Online DDL(第一篇)(r11笔记第3天)
- 转--quick-cocos做客户端,golang做服务端,实现HTTP通信
- Nginx配置SSL证书
- Golang语言RPC Authorization进行简单ip安全验证的方法
- 深入理解Oracle中的DBCA
- Golang语言goto语句
- 转--Golang语言语法汇总
- Oracle,MySQL迁移整合的问题总结(r10笔记第99天)
- MySQL修复表的简单分析(r11笔记第19天)
- Golang语言中的流程控制结构和函数详解
- Golang语言版的ip2long函数实例
- Oracle闪回原理-Logminer解读redo(r11笔记第17天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- YII框架页面缓存操作示例
- PHP chunk_split()函数讲解
- Python3爬虫中Ajax的用法
- stripos函数知识点实例分享
- PHP实现字符串大小写转函数的功能实例
- 在django中实现choices字段获取对应字段值
- python语言中有算法吗
- jQuery ajax+PHP实现的级联下拉列表框功能示例
- PHP+mysql防止SQL注入的方法小结
- 浅谈tensorflow 中的图片读取和裁剪方式
- Python实现SMTP邮件发送
- 浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
- 通过PHP设置BugFree获取邮箱通知
- Django封装交互接口代码
- 使用K.function()调试keras操作