<!DOCTYPE html>
<html>
<head>
<title>KendoUI Test Page</title>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<input type="button" value="filter" id="filter-btn" />
<script>
var data = [
{ id: 1, item: "A", foo: 1, bar: true, baz: new Date(1995,11,17) },
{ id: 2, item: "B", foo: 2, bar: false, baz: new Date(2010,10,27) },
{ id: 3, item: "B", foo: 3, bar: true, baz: new Date(2009, 0,18) },
{ id: 4, item: "A", foo: 4, bar: false, baz: new Date(2005, 8,15) },
{ id: 5, item: "A", foo: 5, bar: false, baz: new Date(2011,10,11) },
{ id: 6, item: "A", foo: 6, bar: true, baz: new Date(2013, 5, 1) }
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function (operation) {
operation.success(data);
}
},
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
item: { type: "string" },
foo: { type: "number" },
bar: { type: "boolean" },
baz: { type: "date" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
"item", "foo", "bar"
]
});
$("#filter-btn").click(function (e) {
var kendoGrid = $("#grid").data("kendoGrid");
var search = { logic: "and", filters: [] };
search.filters.push({ field: "item", operator: "eq", value: "B" });
search.filters.push({ field: "bar", operator: "eq", value: true });
kendoGrid.dataSource.filter(search);
console.log(kendoGrid.dataSource.filter());
})
</script>
</body>
</html>
上面demo引用“http://jsbin.com/ihuqit/2/edit”
下图是另一个例子，实现filter模糊查询用到keyup事件：
部分代码：
$("#nameFilter").keyup(filterResults);
$("#modelFilter").keyup(filterResults);
$("#hostFilter").keyup(filterResults);
$("#addressFilter").keyup(filterResults);
function filterResults(event) {
var deviceFilter = { logic: "and", filters: [] };
deviceFilter.filters.push({ field: "name", operator: "contains", value: $("#nameFilter").val() });
//model包含输入的能够匹配model id和model name，所以定义了一个子filter：subfilter
var subfilter = { logic: "or", filters: [] };
var searchTerm = $("#modelFilter").val();
subfilter.filters.push({ field: 'model.name', operator: "contains", value: searchTerm });
// subfilter返回一个或的关系
if (parseInt(searchTerm)) {
subfilter.filters.push({ field: "model.modelId", operator: "eq", value: parseInt(searchTerm) });
}
deviceFilter.filters.push(subfilter);
$("#deviceGrid").data("kendoGrid").dataSource.filter(deviceFilter);
}