Telerik RadTreeView 和客户端展开/折叠答案

【问题标题】：Telerik RadTreeView And Client-Side Expand/CollapseTelerik RadTreeView 和客户端展开/折叠
【发布时间】：2011-12-10 08:48:13
【问题描述】：

我正在使用这种方法来扩展和折叠客户端 JavaScript 中的所有节点：http://www.telerik.com/help/aspnet/treeview/tree_expand_client_side.html

但是，处理这个需要很长时间，并且在展开然后折叠后，我收到“脚本无响应”错误，所以我想知道是否有办法为相当大的树加快这个速度？有没有更好的方法来解析它？目前，这棵树有 4 层深。

谢谢。

【问题讨论】：

你也可以发布一些代码吗？
它没有什么特别之处；它本质上是从服务器端可编程地创建 4 层的 621 个节点......从客户端，代码正是上面链接中的内容。
您是否已经尝试在服务器端扩展所有节点，因为您已经以编程方式在服务器上创建节点？不应该真的对性能造成影响，并且可能是这里更好的选择。至于这一点，您的特定实现可能有一些特定的东西导致了这种情况，因为我机器上的类似测试工作得很好。将其隔离为解决方案并在 Telerik 的支持票中提交将是您最好的选择。

标签： javascript asp.net performance telerik radtreeview

【解决方案1】：

我通过异步展开和折叠树来解决“脚本无响应”错误。此外，我从底部展开（因此您可以看到节点展开）并从顶部折叠，但仅当它到达每个分支中的最后一个节点时，因此在视觉上它对用户来说更有趣。他们实际上可以看到它的发生，如果它不快（IE7 和之前的版本特别慢），至少在他们等待的时候很有趣。

var treeView, nodes;

function expandAllNodesAsynchronously() {
    if (<%= expandedLoaded.ToString().ToLower() %>) {
        treeView = $find("<%= tv.ClientID %>");
        nodes = treeView.get_allNodes();
        if (nodes.length > 1) {
            doTheWork(expandOneNode, nodes.length);
        }
        return false;
    } else
        return true;
}

function expandOneNode(whichNode) {
    var actualNode = nodes.length - whichNode;
    if (nodes[actualNode].get_nextNode() == null) {
        nodes[actualNode].get_parent().expand();
    }
}

function collapseAllNodesAsynchronously() {
    treeView = $find("<%= tv.ClientID %>");
    nodes = treeView.get_allNodes();
    if (nodes.length > 1) {
        doTheWork(collapseOneNode, nodes.length);
    }
}

function collapseOneNode(whichNode) {
    if (nodes[whichNode].get_nextNode() == null && nodes[whichNode].get_parent() != nodes[0]) {
        nodes[whichNode].get_parent().collapse();
    }
}

function doTheWork(operation, cycles) { //, callback
    var self = this, // in case you need it
        cyclesComplete = 1,
        batchSize = 10; // Larger batch sizes will be slightly quicker, but visually choppier

    var doOneBatch = function() {
        var c = 0;
        while(cyclesComplete < cycles) {
            operation(cyclesComplete);
            c++;
            if(c >= batchSize) {
                // may need to store interim results here
                break;
            }
            cyclesComplete++;
        }
        if (cyclesComplete < cycles) {
            setTimeout(doOneBatch, 1); // "1" is the length of the delay in milliseconds
        }
        else {
            // Not necessary to do anything when done
            //callback(); // maybe pass results here
        }
    };

    // kickoff
    doOneBatch();
    return null;
};

【讨论】：

【解决方案2】：

首先使用yourtreeViewInstance.get_nodes() 获取您的节点，然后使用eachChildNode.get_nodes() 获取子节点，依此类推。

然后您可以通过在您要展开的每个节点上调用.set_expanded(true); 来展开每个项目。

【讨论】：