簡體   English   中英

如何基於多個屬性選擇劍道樹視圖節點

[英]How to select Kendo tree view node based on multiple properties

我正在使用劍道樹視圖控件。 在我的數據中,某些節點具有相同的父節點和子節點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和類型2的節點。 我的treeview配置為loadondemand設置為true(數據很大)。 我所擁有的是Id和Type值,以擴展並選擇該特定節點。

當我嘗試使用treeview數據源get方法時,我得到的是第一個匹配項,在上面的示例中為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
                    }

嘗試以下遞歸函數:

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

演示版

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM