Kendo Treeview 扩展大树问题答案

【问题标题】：Kendo Treeview Expanding big tree issueKendo Treeview 扩展大树问题
【发布时间】：2014-07-15 07:26:01
【问题描述】：

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

【问题讨论】：

标签： javascript kendo-ui treeview

【解决方案1】：

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

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

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

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

将树更改为使用服务器端展开方法：
请在this link 中查看 绑定到远程数据 的 Kendo UI 演示。请注意，loadOnDemand 应设置为 true。另外服务器端Expand 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);
}

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

希望这会有所帮助。

【讨论】：

感谢您的尝试，这会使我的应用程序变慢，因为如果有 10000 条记录，那么它将为每个节点发送到服务器，也会使服务器变慢.. 第二点已经处理好了当像这样创建树视图时： var ds = new kendo.data.HierarchicalDataSource({ data: data, schema: { model: { id: 'treeId', hasChildren: function (e) { return e.items.length > 0; }，孩子：“项目”} } }）；所以这不会有帮助..谢谢
看这个例子我已经在第二级添加了所有的孩子，我只是点击展开按钮仍然挂起：jsfiddle.net/GHdwR/134
@DevendraSoni：实际的问题是生成 HTML 元素。如果您设置loadOnDemand: false，您可以在您的示例中看到，在扩展它之前尝试生成所有 HTML 元素并且浏览器挂起。但是如果设置loadOnDemand: true，它不会在扩展节点之前生成HTML，这是某种延迟加载。所以在服务器端的例子中，生成html元素的任务分散在多个线程中，并没有挂起（在我看来这就是原因）。
是的，我知道这一点……但这会使我的服务器变慢。
@DevendraSoni：也许你应该尝试其他 GUI 组件而不是 Kendo UI。

【解决方案2】：

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

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

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

尽管如此，如果您使用 10000 个元素，您很可能会认为它很慢，但很抱歉挑战您：您真的认为 10000 个节点树是用户友好的吗？树是呈现如此大量数据的正确方式吗？

【讨论】：