Question

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

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

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

这是尝试过的代码：

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的处理程序应该执行：

选中复选框。
为勾选的复选框构建过滤条件。
将过滤器应用于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);
});

正在运行here

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

1 个答案: