如何在Kendo树视图中查找嵌套节点,其中数据通过web-api"lazely"提供

Question

我知道在Kendo树视图中查找嵌套节点的确切路径.所以我希望沿着这条路线扩展所有节点去实现目标.我知道如何找到一个节点并让Kendo扩展该节点.

我的Treeview使用web-api来获取数据,一切运行良好.模式定义如下:

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

我想要实现的是树自动扩展到嵌套级别.说我知道到达节点的路径是'Level1CodeA | Level2CodeA | Level3CodeA'所以首先我想找到我能做的代码'Level1CodeA'.
然后,我希望扩展此节点(在内部它检索此节点下的数据,它扩展正常)之后我想找到'Level2CodeA',重复该过程,所以也找到然后选择Level3CodeA.

我该怎么做？我正在寻找一个'AfterExpanded'事件,我可以用它开始下一个搜索和扩展操作,但我找不到任何我可以使用的事件.我在我的数据源上尝试了'更改'事件,但这次被激活多次,我似乎无法将其缩小到正确的项目..

非常感谢.

编辑:更多代码

<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并将其分配给树视图的代码:

    // -----------------
    // 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检查是否还有一些pending(search.length > 0),如果是,则按其text(var first = tree.findByText(search[0]);)查找元素,从search(search.shift();)中删除元素,最后删除expandnode(tree.expand(first)).这会导致下一个级别被加载,当接收到的dataBound事件被触发时,我将进入下一个级别.

看到它在这里运行

编辑:如果不是按文本搜索,而是选择导航,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);
        } 
    }
}

这里有新的运行示例