Kendo Treeview 扩展大树问题

问题描述

我使用kendo TreeView 创建了一个树控件.它有超过10,000 个节点，我在创建Tree 时使用了loadOnDemand false.我提供了一个功能来按级别扩展树，为此我创建了一个方法，该方法将参数级别"作为数字并相应地扩展它，用户可以在该方法中输入 15(最大级别)，它可以正常工作所有级别有 500 到 600 个节点，但是当树的节点超过 5000 个时，如果用户尝试扩展到第二级节点之上，则浏览器会挂起并显示无响应错误.

I have created a tree control using kendo TreeView.it has more than 10,000 nodes and i have used loadOnDemand false when creating Tree.I am providing a feature to expand the tree by its level, for this i have created a method which takes the parameter "level" as number and expand it accordingly and user can enter 15 (max level) into the method, it works fine with 500 to 600 nodes for all the levels but when tree has more than 5000 nodes than if user is trying to expand above the 2nd level nodes then browser hangs and shows not responding error.

我创建的扩展树的方法是:-

Method which i have created to expand the tree is :-

function ExapandByLevel(level, currentLevel) {
  if (!currentLevel) {
    currentLevel = 0;
  }
  if (level != currentLevel) {
    var collapsedItems = $("#treeView").find(".k-plus:visible");
    if (collapsedItems.length > 0) {
        setTimeout(function () {
            currentLevel++;

            var $tree = $("#treeView");
            var treeView = $tree.data("kendoTreeView");

            var collapsedItemsLength = collapsedItems.length;
            for (var i = 0; i < collapsedItemsLength; i++) {
                treeView.expand($(collapsedItems[i]).closest(".k-item"));
            }
            ExapandByLevel(level, currentLevel);
        }, 100);
    }
    else {
        //console.timeEnd("ExapandByLevel");
        hideLoading();
    }
  }
  if (level == currentLevel) {

    hideLoading();
  }
}

像这样调用上面给定的方法:-

call above given method like this:-

ExapandByLevel(15);

这里 15 是在树中展开的级别.

here 15 is level to expand in tree.

当树有超过 5000 个节点时，如果用户试图扩展到 2 级节点以上，则浏览器会挂起并显示无响应错误.请提出任何方法来做到这一点，我想要的是扩展可以包含 5000 多个节点的树.

when tree has more than 5000 nodes than if user is trying to expand above the 2nd level nodes then browser hangs and shows not responding error.please suggest any way to do this,what i want is expand the tree which can contains more than 5000 nodes.

推荐答案

当我想加载具有 30,000 个节点的树时，我在使用 kendo TreeView 时遇到了类似的问题.即使 loadOnDemand 设置为 true，浏览器也会长时间冻结以加载此数量的节点.

I had a similar problem with kendo TreeView, when I wanted to load a tree with 30,000 nodes. The browser would freeze for a long time to load this number of nodes even when loadOnDemand was set to true.

所以我们决定实现扩展节点的服务器端功能，这就是你应该做的.您需要对现有代码进行 2 处更改.

So we decided to implement the server-side functionality for expanding nodes, and that's what you should do. You need to have 2 changes in your existing code.

1. 使用服务器端扩展方法更改您的树.
2. 调用 expand 时，应确保节点已展开.

下面将解释这两个步骤.您应该知道的是，这样您的浏览器根本不会挂起，但是完成操作可能需要一些时间，因为会有很多 webservice 调用服务器.

These two steps will be explained below. The thing you should know is, this way your browser doesn't hang at all, but it may take some time to complete the operation, because there will be so many webservice calls to the server.

1. 更改树以使用服务器端扩展方法:
   请在 绑定到远程数据的 Kendo UI 演示>这个链接.请注意，loadOnDemand 应设置为 true.另外还要实现服务器端的Expand web服务.

1. Change your tree to use server side Expand method:
   Please see Kendo UI's demos for Binding to Remote Data in thislink. Note that loadOnDemand should be set to true. In addition the server side Expand web service should be implemented too.

调用 expand 时，应确保节点已扩展:
为了做到这一点，应该在 Kendo UI TreeView 中定义一个类似 Expanded 的事件，但不幸的是没有，除了 Expanding 事件.在这种情况下使用 setTimeout 是不可靠的，因为网络不可靠.所以我们最终使用 while 语句来检查节点的子节点是否已创建.对此可能有更好的解决方案，但这满足我们当前的要求.这是您在扩展节点时应该进行的更改:

When you call expand, you should make sure the node is expanded:
In order to do this, there should be an event like Expanded defined in Kendo UI TreeView, but unfortunately there is none, except Expanding event. Using setTimeout in this case is not reliable, because the network is not reliable. So we ended up using a while statement to check that the node's children are created or not. There might be a better solution for this, however this satisfies our current requirement. Here's the change you should make when expanding nodes:

if (collapsedItems.length > 0) {
    currentLevel++;

    var $tree = $("#treeView");
    var treeView = $tree.data("kendoTreeView");

    var collapsedItemsLength = collapsedItems.length;
    for (var i = 0; i < collapsedItemsLength; i++) {
        var node = $(collapsedItems[i]).closest(".k-item")
        if (!node.hasChildren)
            continue; // do not expand if the node does not have children
        treeView.expand(node);
        // wait until the node is expanded
        while (!node.Children || node.Children.length == 0);
    }
    ExapandByLevel(level, currentLevel);
}

您也可以以并行方式执行扩展调用以减少加载时间，但是您应该更改检查所有节点是否已扩展的方式.我刚刚在这里写了一个应该可以正常工作的示例代码.

You can also do the expand calls in a parallel way in order to decrease the loading time, but then you should change the way you check if all the nodes are expanded or not. I just wrote a sample code here that should work fine.

希望这会有所帮助.

这篇关于Kendo Treeview 扩展大树问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！