kendo filter实现搜索

<!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);
        }

 

你可能感兴趣的:(Kendo)