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小部件是一个统一的控件，用于筛选具有数据源的数据绑定组件。
Filter的用户界面对于没有内置UI进行筛选但需要提供筛选器选项的数据绑定组件很有用，例如ListView，Chart和Scheduler。 您可以添加或删除用于过滤数据的字段，并为每个字段选择过滤器的全局逻辑（AND或OR）和过滤器运算符（例如，包含或等于）。您可以通过内置按钮或API调用应用过滤，还可以选择名称，以这些名称显示给用户并本地化过滤器操作符和消息。
初始化Filter
要使用过滤器，请使用一个空的"div"元素，并在初始化脚本中提供其设置。
下面的示例演示如何：
将Filter绑定到数据源。在列表视图中显示过滤的数据。在字段中使用易于理解的名称。设置初始过滤器表达式。注意：
您可以使用远程数据源而不是本地数据数组。 在本示例中，为简洁起见，使用了本地数组。不需要提供字段，因为过滤器可以从数据源中提取它们。 如果您未在过滤器设置中设置字段，则会向用户显示实际的字段名称，而不是可读的标签。如果您在过滤器设置中设置了字段，则它们必须与数据源的架构匹配。不需要提供初始过滤器表达式，此功能对于还原以前的状态很有用。 <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>功能和特点
设置运算符保持状态全球化引用现有实例
要引用现有的Filter实例，请使用jQuery.data（）方法。 建立引用后，请使用Filter API来控制其操作。
var filter = $("#theFilter").data("kendoFilter");了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
