Kendo Treeview扩大了大树问题

Question

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

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

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个节点时,如果用户尝试在第二级节点上方展开,则浏览器挂起并显示未响应错误.请建议任何方式来做到这一点,我想要的是扩展可以包含超过5000个节点的树.

Answer 1

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

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

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

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

1. 更改您的树以使用服务器端展开方法：请参阅此链接中的
   Kendo UI 的绑定到远程数据的演示。注意应该设置为. 此外，还应该实现服务器端 Expand Web 服务。loadOnDemandtrue

2. 当你调用expand时，你应该确保节点被展开：
   为了做到这一点，应该有一个像ExpandedKendo UI TreeView中定义的事件，但不幸的是除了事件之外没有任何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);
   }
   

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

希望这可以帮助。