如何根据树视图节点填充网格(复选框选择)？

Question

我正在使用Kendo UI控件做一个项目.在项目左侧"树视图"和右侧"kendogrid"被放置.

这里我的要求是基于树视图节点过滤网格,并且需要进行多选.

例如:eg:10249,10248基于此节点过滤网格.

这是我的小提琴:http://jsfiddle.net/RHh67/7/

这是尝试代码:

var tree= $("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },

    dataSource: [{
        id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
            {
                id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
                { id: 3, text: "10248"  },
                { id: 4, text: "10249"  },
                { id: 5, text: "10250" },
                { id: 6, text: "10251" },
                { id: 7, text: "10252" }
            ]
        }]
    }]
}).data("kendoTreeView");

tree.dataSource.bind("change", function (e) {
    var ds = $("#grid").data("kendoGrid").dataSource;
    ds.filter([
        {"logic":"or",
            "filters":[
                {
                    "field":"OrderId",
                    "operator":"eq",
                }
            ]}
    ]);
});

任何人都可以帮我找到我错在哪里吗？

Answer 1

该处理程序change上tree应做到:

1. 选中复选框.
2. 为勾选的复选框构建过滤条件.
3. 将过滤器应用于DataSource.

就像是:

$("#treeview").on("change", function (e) {
    var selected = $('#treeview :checked').closest('li');
    var ds = grid.dataSource;
    var filter = {
        logic  : "or",
        filters: []
    };
    $.each(selected, function (idx, elem) {
        var item = tree.dataItem(elem);
        if (parseInt(item.text)) {
            console.log("item.text", item.text);
            filter.filters.push({
                field   : "OrderID",
                operator: "eq",
                value   : parseInt(item.text)
            });
        }
    });
    console.log("filter", filter);
    ds.filter(filter);
});

在这里跑