Javascript 剑道树视图扩展大树问题

我已经使用kendo TreeView创建了一个树控件。它有10000多个节点，我在创建树时使用了loadOnDemand false。 我提供了一个按级别展开树的功能，为此我创建了一个方法，该方法将参数“级别”作为编号并相应展开，用户可以在该方法中输入15（最大级别），对于所有级别的500到600个节点，它都可以正常工作，但当树的节点数超过5000个时，如果用户试图在第二级节点以上展开，则浏览器将挂起并显示“无响应”错误

我创建的展开树的方法是：-

函数ExapandByLevel（级别，当前级别）{
如果（！currentLevel）{
currentLevel=0；
}
如果（级别！=当前级别）{
var collapsedItems=$（“#treeView”）.find（“.k-plus:可见”）；
如果（collapsedItems.length>0）{
setTimeout（函数（）{
currentLevel++；
var$tree=$（“#treeView”）；
var treeView=$tree.data（“kendoTreeView”）；
var collapsedItemsLength=collapsedItems.length；
对于（变量i=0；i

按如下方式调用上述给定方法：-

ExapandByLevel(15);

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

当树的节点数超过5000个时，若用户试图扩展到第二级节点以上，则浏览器将挂起并显示“无响应”错误。

---

请给出建议，我想要的是扩展包含5000多个节点的树。

当我想加载一个包含30000个节点的树时，我在kendo TreeView中遇到了类似的问题。即使

loadOnDemand

设置为true，浏览器也会长时间冻结以加载此数量的节点

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

使用服务器端展开方法更改树

调用expand时，应确保节点已展开

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

将树更改为使用服务器端展开方法：
请参阅Kendo UI的演示，了解如何绑定到中的远程数据。请注意，

loadOnDemand

应设置为

true

。此外，还应实现服务器端扩展web服务

调用expand时，应确保节点已展开：
为了做到这一点，应该在KendoUITreeView中定义一个类似于

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

if（collapsedItems.length>0）{
currentLevel++；
var$tree=$（“#treeView”）；
var treeView=$tree.data（“kendoTreeView”）；
var collapsedItemsLength=collapsedItems.length；
对于（变量i=0；i

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

---

希望这有帮助。

您的问题的解决方案非常简单：更新您正在使用的剑道UI版本，因为他们已经优化了

HierarchycalDataSource

和

TreeView

的代码

选中此项：

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

---

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

谢谢您的尝试，这将使我的应用程序运行缓慢，因为如果有10000条记录，那么它将进入每个节点的服务器，并使服务器运行缓慢。。在创建这样的树视图时，第二点已经得到了注意：var ds=new kendo.data.hierarcialDataSource（{data:data，schema:{model:{id:'treeId'，haschilds:function（e）{return e.items.length>0；}，子项：“项”}}}）；所以这不会有什么帮助..谢谢这个例子我已经在第二级添加了所有的child，我只是点击了扩展按钮，但它仍然挂起：@DevendraSoni:实际的问题是生成HTML元素。您可以在示例中看到，如果在展开之前设置

loadOnDemand:false

，它将尝试生成所有HTML元素和浏览器ha