數據管理必看！Kendo UI for jQuery過濾器的全球化

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小部件是一個統一的控件，用於篩選具備數據源的數據綁定組件。

概述

全球化進程結合組件消息的翻譯（本地化）和使其適應特定的文化（國際化和支持從右到左），經過過濾器消息的本地化能夠啓用過濾器的全球化功能。

本地化

過濾器提供用於定義其過濾器運算符（例如包含、等於或大於）和邏輯消息（例如，AND和OR）的文本選項。

要本地化消息，請在messages字段中設置所需的字符串。要本地化運算符的名稱，請列出可用的運算符，而後在operators字段中設置其文本。

<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最新資訊，請關注Telerik中文網！