如何根据多个属性选择Kendo树视图节点

时间:2018-04-10 14:22:42

标签: javascript asp.net asp.net-core kendo-ui kendo-treeview

我正在使用Kendo树视图控件。在我的数据中,一些节点具有相同的父节点和子节点ID,但是每个节点中存在另一个属性“类型”,对于每个节点是不同的。我的数据有三个级别

以此示例为例

    <div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dataSource: [
    { id: 10, Type:1,text: "foo", items: [
      { id: 10, Type:2, text: "bar", items: [
        { id: 13, Type:3, text: "baz" }
      ] }
    ] }
  ]
});

var treeview = $("#treeview").data("kendoTreeView");

// expand the path of nodes with ID 10 and Type 2
treeview.expandPath([10]);

</script>

我想以编程方式选择Id 10和Type 2的节点。我的treeview配置为loadondemand设置为true(数据很大)。我只需要扩展Id和Type值并选择该特定节点。

当我尝试使用treeview数据源获取方法时,我得到第一个匹配项,在上面的例子中是id 10和Type 1.

“expandPath”方法需要从父级到子级的ID。

如何解决这个问题?

实际设置如下

var treeDataSource = new kendo.data.HierarchicalDataSource({
            data: categoryDataSource,
            schema: {
                model: {
                    id: "Id",
                    children: "Children",
                    hasChildren(node) {
                        return (node.Children && node.Children.length > 0);
                    }
                }
            }
        });

和使用这些选项的树视图

template: dropDownTreeViewTemplate,
                    dataSource: treeDataSource,
                    loadOnDemand: true,
                    dataTextField: "Name",
                    dataValueField: "Id",
                    select: function (e) {
                        // some code
                    }

1 个答案:

答案 0 :(得分:3)

试试这个递归函数:

let expandNodeRecursive = function expandNodeRecursive(id, type, nodes)
{
    let treeview = $("#treeview").data("kendoTreeView");

    if (!nodes) {
        nodes = treeview.dataSource.data();
    }

    var dataItem;
    for (var i = 0, l = nodes.length; i < l; i++) {
        dataItem = nodes[i];

        if (dataItem.Type == type && dataItem.id == id) {
            treeview.expandPath([dataItem.id]);
        }
        else if (dataItem.items && dataItem.items.length) {
            expandNodeRecursive(id, type, dataItem.items);
        }
    };
};

// Call it without 'nodes' param
expandNodeRecursive(2, 10);

Demo

相关问题