KendoUI学习_02

kendoUI学习之Filter

在KendoUI中，有Grid这种提供内置过滤UI的编辑组件，也有ListView，Chart和Scheduler这样没有内置过滤的编辑组件。

在使用这种组件时，当我们需要过滤显示的数据的时候，就需要用上Filter了

1.0 提供一个div

在使用Filter之前，需要在界面中提供一个空的div元素，并在初始化脚本中设置Filter

<div id="filter">div>

2.0 初始化设置Filter

$("#filter").kendoFilter({
            dataSource: dataSource,  //绑定的数据源
            expressionPreview: true, //是否显示表达式
            applyButton: true,//是否使用应用按钮
            //数据源中对应的需要过滤的字段
			fields: [ 
                { name: "name", type: "string", label: "Name" },
                { name: "age", type: "number", label: "Age" },
                { name: "isOnLeave", type: "boolean", label: "On Vacation" }
            ],
			//默认的表达式显示格式
            expression: { 
                logic: "and",
                filters: [
                    { field: "age", value: 30, operator: "gte" },
                    { field: "name", value: "Doe", operator: "contains" }
                ]
            }
        }).data("kendoFilter").applyFilter();

Filter配置说明

在Filter中，会根据字段的类型的不同，提供不同的过滤配置

String类型

Number类型

Boolean类型

此外，根据在官方测试链接测试发现：
1、在有expressionPreview的情况下，expression必须存在
2、applyButton必须为true