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过滤器概述的更多相关文章

  1. 数据管理必看!Kendo UI for jQuery过滤器的全球化

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. 数据管理必看!Kendo UI for jQuery过滤器状态保持

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  3. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  5. Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  7. Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. 不知如何摧毁Kendo UI for jQuery小部件?这份指南不得不看

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. 「java.util.concurrent并发包」之 CountDownLatch

    一 CountDownLatch是什么 CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHas ...

  2. Linux系列(3):入门之正确的关机方法

    前言:在Windows(非NT主机系统)系统中,由于是单人假多任务的情况,所以即使你计算机关机,对于别人也没有丝毫影响!不过,在Linux下面,由于每个程序(或者服务)都是在在背景下执行,因此,在看不 ...

  3. SetIcon(m_hIcon, TRUE);的作用

    SetIcon(m_hIcon, FALSE);// Set small icon 这条语句,程序显示时,左上角就会显示定义了的图标,生成的EXE程序也显示了这个图标 SetIcon(m_hIcon, ...

  4. C++ 包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解(转)

    最近因为接触机器学习,所有涉猎到C++方面的开发.在c++中有几个概念很迷糊. VS项目中的包含目录.库目录.附加包含目录.附加库目录.附加依赖项均在"项目->属性->配置属性& ...

  5. 从入门到自闭之Python--MySQL数据库的多表查询

    多表查询 连表: 内连接:所有不在条件匹配内的数据们都会被剔除连表 select * from 表名1,表名2 where 条件; select * from 表名1 inner join 表名2 o ...

  6. Python开发之IDE选择

    Python开发之IDE 一.为什么用IDE 到现在为止,谁还不是个写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地点,执行时还要切换到命令行调用python解释器,好麻 ...

  7. vue axios异步请求django

    1,配置请求路径 (1),vue中的请求路径要与django视图路径相同. (2),vue中的路由路径也要和django视图路径相同,比如视图路径为127.0.0.1:8000:home/index, ...

  8. (转)Android刷机的一些知识整理

    刷机概述刷机原因刷机可以升级和破解固件(在Android上:即可以升级系统,更改系统,获取Root权限):破解系统的原因①安装第三方软件不需要签名,不受证书的束缚:②修改系统的文件,达到系统的瘦身,以 ...

  9. SmartBinding与kbmMW#2

    前言 在之前的文章中,我介绍了SmartBinding作为Delphi的一个新的易于使用和智能的绑定框架.介绍了包括绑定对象,列表,常规数据和可视控件,以及如何使用导航器,所有这些都用代码做了演示. ...

  10. java_day07_异常

    第七章: 异常 1.异常概述 在我们日常生活中,有时会出现各种各样的异常,例如:职工小王开车去上班,在正常情况下,小王会准时到达单位.但是天有不测风云,在小王去上班时,可能会遇到一些异常情况,比如小王 ...