javascript - Kendo Treeview 展开大树问题

Question

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

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

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

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

ExapandByLevel(15);

这里 15 是在树中扩展的级别。

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

Answer 1

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

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

1. 使用服务器端 Expand 方法更改树。
2. 当你调用expand时，你应该确保节点被展开。

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

1. 更改树以使用服务器端扩展方法:
   请参阅 thislink 中关于 绑定(bind)到远程数据 的 Kendo UI 演示。 .请注意，loadOnDemand 应设置为 true。此外，还应实现服务器端 Expand Web 服务。

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

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

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

希望这对您有所帮助。