jQuery数据管理:Kendo UI过滤器设置运算符
2019-11-07 11:24
1566 查看
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提供用于定义将在过滤下拉列表中显示哪些过滤器运算符的选项。operators字段采用带有每种字段类型可用操作符的文字,您可以列出所需的操作符及其文本。
下面的示例演示如何设置等于和包含字符串字段的过滤器运算符,以及如何将数字字段的大于和小于过滤器运算符设置为字符串字段。
<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, operators: { string: { eq: kendo.ui.Filter.fn.options.operators.string.eq, // Take the default Kendo UI text. contains: "Partially Matches" // Define a custom text. }, number: { gte: "Larger Than", // Define a custom text. lt: kendo.ui.Filter.fn.options.operators.number.lt // Take the default Kendo UI text. } }, 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>
相关文章推荐
- 数据管理必看!Kendo UI for jQuery过滤器状态保持
- JQuery Easy Ui dataGrid 数据表格
- 设置jQueryUI DatePicker默认语言为中文
- Kendo UI使用教程:Kendo UI Grid中的动态数据(二)
- JQuery Easy Ui dataGrid 数据表格
- JQuery Easy Ui dataGrid 数据表格
- Jquery中设置模板绑定数据的方法
- JQuery获取或设置ckeditor的数据(示例代码)
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- JQuery Easy Ui dataGrid 数据表格
- JQuery设置数据滑动展示效果
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile
- jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]
- JQuery Easy Ui dataGrid 数据表格
- jQuery easy ui datagrid 无数据时的样式
- kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)
- JQuery获取或设置ckeditor的数据
- 简洁易用的表单数据设置和收集管理组件
- 解决 jQuery.UI.Resizable aspectRatio在init后无法重新设置