数据管理必看！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中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯