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次更改。

更改树使用服务器端展开方法。
调用expand时，应确保节点已展开。

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

将树更改为使用服务器端展开方法：
请参阅this link中的绑定到远程数据的Kendo UI演示。请注意，loadOnDemand应设置为true。此外，还应实现服务器端扩展Web服务。

调用expand时，应确保节点已展开：
为了做到这一点，应该在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);
}

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

希望这有帮助。

Answer 2

您的问题的解决方案非常简单：更新您正在使用的Kendo UI版本，因为他们已优化（loooooooooot）HierarchicalDataSource和TreeView的代码。

请检查：http://jsfiddle.net/OnaBai/GHdwR/135/

这是您将kendoui.all.min.js的版本更改为v2014.1.318的代码。我甚至没有改变CSS（尽管你应该）。您将看到打开这5000个节点非常快。

然而，如果你去10000个元素，你很可能会认为它很慢但很抱歉挑战你：你真的认为10000节点树是用户友好的吗？树是提供如此大量数据的正确方法吗？

Kendo Treeview扩大了大树问题

2 个答案: