数据管理必看!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微信公众号,及时获取最新动态及最新资讯

数据管理必看!Kendo UI for jQuery过滤器概述的更多相关文章
- 数据管理必看!Kendo UI for jQuery过滤器的全球化
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 数据管理必看!Kendo UI for jQuery过滤器状态保持
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- 不知如何摧毁Kendo UI for jQuery小部件?这份指南不得不看
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
随机推荐
- 「java.util.concurrent并发包」之 CountDownLatch
一 CountDownLatch是什么 CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHas ...
- Linux系列(3):入门之正确的关机方法
前言:在Windows(非NT主机系统)系统中,由于是单人假多任务的情况,所以即使你计算机关机,对于别人也没有丝毫影响!不过,在Linux下面,由于每个程序(或者服务)都是在在背景下执行,因此,在看不 ...
- SetIcon(m_hIcon, TRUE);的作用
SetIcon(m_hIcon, FALSE);// Set small icon 这条语句,程序显示时,左上角就会显示定义了的图标,生成的EXE程序也显示了这个图标 SetIcon(m_hIcon, ...
- C++ 包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解(转)
最近因为接触机器学习,所有涉猎到C++方面的开发.在c++中有几个概念很迷糊. VS项目中的包含目录.库目录.附加包含目录.附加库目录.附加依赖项均在"项目->属性->配置属性& ...
- 从入门到自闭之Python--MySQL数据库的多表查询
多表查询 连表: 内连接:所有不在条件匹配内的数据们都会被剔除连表 select * from 表名1,表名2 where 条件; select * from 表名1 inner join 表名2 o ...
- Python开发之IDE选择
Python开发之IDE 一.为什么用IDE 到现在为止,谁还不是个写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地点,执行时还要切换到命令行调用python解释器,好麻 ...
- vue axios异步请求django
1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...
- (转)Android刷机的一些知识整理
刷机概述刷机原因刷机可以升级和破解固件(在Android上:即可以升级系统,更改系统,获取Root权限):破解系统的原因①安装第三方软件不需要签名,不受证书的束缚:②修改系统的文件,达到系统的瘦身,以 ...
- SmartBinding与kbmMW#2
前言 在之前的文章中,我介绍了SmartBinding作为Delphi的一个新的易于使用和智能的绑定框架.介绍了包括绑定对象,列表,常规数据和可视控件,以及如何使用导航器,所有这些都用代码做了演示. ...
- java_day07_异常
第七章: 异常 1.异常概述 在我们日常生活中,有时会出现各种各样的异常,例如:职工小王开车去上班,在正常情况下,小王会准时到达单位.但是天有不测风云,在小王去上班时,可能会遇到一些异常情况,比如小王 ...