javascript - 如何根据 Treeview 节点填充网格(复选框选择)？

Question

我正在使用 Kendo UI 控件做一个项目。在项目中放置左侧“treeview”和右侧“kendogrid”。

这里我的需求是根据treeview节点过滤网格，并且需要进行多选。

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

这是我的 fiddle :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

树上更改的处理程序应该执行以下操作:

1. 获取选中的复选框。
2. 为勾选的复选框构建过滤条件。
3. 将过滤器应用于数据源。

类似于:

$("#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);
});

正在运行here