kendo-ui - 如何在 Kendo TreeView 中查找嵌套节点，其中数据为 'lazely' 通过 web-api 提供

Question

我知道在 Kendo 树 View 中查找嵌套节点的确切路径。所以我希望沿着这条路线扩展所有节点去到达那里。
我知道如何找到一个节点并使 Kendo 扩展该节点。

我的 Treeview 对其数据使用了 web-api，并且一切正常。架构定义如下:

            schema: {
                model: {
                    id: "CodeList",
                    hasChildren: "HasKids"
                }
            }

我想要实现的是树自动扩展到嵌套级别。
假设我知道到达节点的路径是“Level1CodeA|Level2CodeA|Level3CodeA”，所以首先我希望找到我可以做的代码“Level1CodeA”。
然后我希望扩展这个节点(在内部它检索这个节点下的数据并且它扩展正常)之后我想找到'Level2CodeA'，重复这个过程，所以也找到然后选择Level3CodeA。

我该怎么办？我正在寻找一个“AfterExpanded”事件，我可以用它来开始下一个搜索和展开操作，但我找不到任何可以使用的事件。我在我的数据源上尝试了 'change' 事件，但这被多次触发，我似乎无法将其缩小到正确的项目..

非常感谢。

编辑:更多代码

<script id="treeII-template" type="text/kendo-ui-template">
    <img id="explorerItemImg" src="#: item.Image #" />
    <span id="explorerItemCode">#: item.Code #</span> - 
    <span id="explorerItemFullName">#: item.FullName #</span>
    # if (item.Level < (item.Levels - 1)) { #
        [<span id="explorerItemLCount">#: item.LCount #</span>]
    # } #
    # if (item.HasKids) { #
        [<span id="explorerItemPCount">#: item.PCount #</span>]
    # } #

</script>

创建 HierarchicalDataSource 并将其分配给树 View 的代码:

    // -----------------
    // set the datasource for the bottom explorer...
    // -----------------
    var loadDataForExplorerGroup = function (context, groupid, groupsequence) {

        // hang on to this context/groupid
        sessionStorage.setItem(context + "_explorer_groupId", groupid);
        sessionStorage.setItem(context + "_explorer_groupSequence", groupsequence);

        // define the datasource and attach it to the explorer-tree
        explorerGroupData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/api/explorerapi/GetExplorerData?",
                    data: {
                        context: "portfolio",
                        groupid: groupid,
                        groupsequence: groupsequence,
                        userid: sessionStorage.getItem("symUserID")
                    }
                }
            },
            schema: {
                model: {
                    id: "CodeList",
                    hasChildren: "HasKids"
                }
            }
        });

        // simply assign the data source again to the tree
        $("#idExplBottomTree").data("kendoTreeView").setDataSource(explorerGroupData);

    };

Answer 1

那个AfterExpanded事件可能是 dataBound .我会提出以下建议 TreeView定义:

var tree = $("#treeview").kendoTreeView({
    dataSource   : data,
    dataTextField: "text",
    dataBound    : function (e) {
        treeNavigateNext();
    }
}).data("kendoTreeView");

我已添加 dataBound调用 treeNavigate 的处理程序定义为:

function treeNavigateNext() {
    if (search.length > 0) {
        var first = tree.findByText(search[0]);
        if (first) {
            search.shift();
            tree.expand(first);
        }
    }
}

哪里 search是一个包含 dataTextField 的数组我们要导航的每个节点。

例子:

search = [];
search.push("t_3");
search.push("t_32");
search.push("t_321");
search.push("t_3214");

定义我们想要 expand文本为 t_3 的节点，然后 t_32 , 下一个 t_321最后 t_3214 .

所以 treeNavigateNext检查是否仍有待处理的内容( search.length > 0 )，如果是，则通过其 text 找到该元素( var first = tree.findByText(search[0]); )，从 search 中删除元素( search.shift(); ) 最后 expand节点( tree.expand(first) )。这会导致加载下一个级别并在收到时 dataBound事件被触发，我将进入下一个级别。

看它运行 here

编辑:如果不是按文本搜索，您更喜欢按 id 导航然后添加到 search数组 id不同的节点，并使用以下 treeNavigateNext函数代替:

function treeNavigateNext() {
    if (search.length > 0) {
        var first = tree.dataSource.get(search[0]);
        if (first) {
            search.shift();
            var elem = tree.findByUid(first.uid);
            tree.expand(elem);
        } 
    }
}

新的运行示例 here