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'元素,并在初始化脚本中提供其设置。 下面的示例演示如何:
注意:
<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'); |
|