Kendo UI for jQuery數(shù)據(jù)管理使用教程：Filter概述

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

Kendo UI Filter小部件是一個(gè)統(tǒng)一的控件，用于篩選具有數(shù)據(jù)源的數(shù)據(jù)綁定組件。

Filter的用戶界面對(duì)于沒有內(nèi)置UI進(jìn)行篩選但需要提供篩選器選項(xiàng)的數(shù)據(jù)綁定組件很有用，例如ListView，Chart和Scheduler。 您可以添加或刪除用于過濾數(shù)據(jù)的字段，并為每個(gè)字段選擇過濾器的全局邏輯（AND或OR）和過濾器運(yùn)算符（例如，包含或等于）。您可以通過內(nèi)置按鈕或API調(diào)用應(yīng)用過濾，還可以選擇名稱，以這些名稱顯示給用戶并本地化過濾器操作符和消息。

初始化Filter

要使用過濾器，請(qǐng)使用一個(gè)空的"div"元素，并在初始化腳本中提供其設(shè)置。

下面的示例演示如何：

• 將Filter綁定到數(shù)據(jù)源。
• 在列表視圖中顯示過濾的數(shù)據(jù)。
• 在字段中使用易于理解的名稱。
• 設(shè)置初始過濾器表達(dá)式。

注意：

• 您可以使用遠(yuǎn)程數(shù)據(jù)源而不是本地?cái)?shù)據(jù)數(shù)組。 在本示例中，為簡潔起見，使用了本地?cái)?shù)組。
• 不需要提供字段，因?yàn)檫^濾器可以從數(shù)據(jù)源中提取它們。 如果您未在過濾器設(shè)置中設(shè)置字段，則會(huì)向用戶顯示實(shí)際的字段名稱，而不是可讀的標(biāo)簽。如果您在過濾器設(shè)置中設(shè)置了字段，則它們必須與數(shù)據(jù)源的架構(gòu)匹配。
• 不需要提供初始過濾器表達(dá)式，此功能對(duì)于還原以前的狀態(tài)很有用。

<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>

功能和特點(diǎn)

• 設(shè)置運(yùn)算符
• 保持狀態(tài)
• 全球化

引用現(xiàn)有實(shí)例

要引用現(xiàn)有的Filter實(shí)例，請(qǐng)使用jQuery.data（）方法。 建立引用后，請(qǐng)使用Filter API來控制其操作。

var filter = $("#theFilter").data("kendoFilter");

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊