Kendo UI for jQuery数据管理使用教程:Filter概述

翻译|使用教程|编辑:龚雪|2019-10-30 09:55:13.263|阅读 31 次

概述:Kendo UI Filter小部件是一个统一的控件,用于筛选具有数据源的数据绑定组件。Kendo UI for jQuery R3 2019 SP1全新发布,立即下载体验新版哦!

相关链接:

Kendo UI for jQuery最新试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

创建现代Web应用程序的最完整UI库。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat