Kendo UI for jQuery數(shù)據(jù)管理使用教程：過(guò)濾器的全球化

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庫(kù)。

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

概述

全球化進(jìn)程結(jié)合組件消息的翻譯（本地化）和使其適應(yīng)特定的文化（國(guó)際化和支持從右到左），通過(guò)過(guò)濾器消息的本地化可以啟用過(guò)濾器的全球化功能。

本地化

過(guò)濾器提供用于定義其過(guò)濾器運(yùn)算符（例如包含、等于或大于）和邏輯消息（例如，AND和OR）的文本選項(xiàng)。

要本地化消息，請(qǐng)?jiān)趍essages字段中設(shè)置所需的字符串。要本地化運(yùn)算符的名稱，請(qǐng)列出可用的運(yùn)算符，然后在operators字段中設(shè)置其文本。

<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,
messages: {
  or: "OR", // The OR main logic text.
  and: "AND", // The AND main logic text.
  apply: "Set Filter" // The APPLY button text.
  },
  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最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

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