Kendo UI for jQuery数据管理使用教程:过滤器的全球化

Kendo UI Filter小部件是一个统一的控件,用于筛选具有数据源的数据绑定组件。全球化进程结合组件消息的翻译(本地化)和使其适应特定的文化(国际化和支持从右到左),通过过滤器消息的本地化可以启用过滤器的全球化功能。

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>

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2019年10月16日
下一篇 2019年10月16日

相关推荐

发表回复

登录后才能评论