javascript - JS树加载时间问题

Question

我已经用 js 树实现了树，在这里加载树时我有很多时间(大约 1 分钟)..

我想找到减少时间的方法，我的实现中有超过 5000 个节点。

在我看来

$("#tree").jstree({

        checkbox: {
            real_checkboxes: true,
            real_checkboxes_names: function (n) { return [("check_" + (n[0].id || Math.ceil(Math.random() * 10000))), n[0].id] }
        }, "plugins": ["themes", "html_data", "checkbox", "sort", "ui"]
    }).bind('check_node.jstree', function (event, data) {
        $('#SearchView').show();

    }).delegate("a", "click",
        function (event, data) {
            event.preventDefault();
        });

html 用于加载js树

            <tbody>
                <div id="tree">
                    <ul>
                       @HtmlHelpers.RenderjsTree(Model.CurrentNode)
                    </ul>
                </div>

            </tbody>

RenderjsTree 会递归调用和加载树节点。有什么办法可以减少时间吗？

Answer 1

有几种方法可以解决这个加载缓慢的问题。

一种方法是使用jstree的json_data插件中的ajax方法。 Mike Tyka 在这里给出了一个非常简洁的描述 - http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

另一种方法是通过简单的 javascript 方法 - 如果您愿意使用仍处于测试版的 jstree v3。在我的项目中，我有大约 2200 个节点，json 数据在不到一秒的时间内通过单个 ajax 调用从服务器端传来。但是 json 解析大约需要 8-10 秒，直到页面停止响应。 Jstree v3 有一个在节点打开时从函数中获取节点数据的方法。我使用了该方法，现在页面加载时间不到 2 秒。

function initiate_jstree() {
$("#tree_container").jstree({
    "core": {
        "data": getTree,
        "themes":{
            "icons":false
        },
    },
    "plugins": [ "themes", "ui" ,"types"]

});

}
function makeTreeData(node){
if(node.original && node.original.actualData){
    data=node.original.actualData;
}else{
    data=gData;
}
treeData=[];
for(i=0;i<data.length;i++){
    iter=data[i];
    item={"text": iter.data};
    if(iter.children){
        item["children"]=true;
        item["actualData"]=iter.children;            
    }
    treeData.push(item);
}
return treeData;
}
var getTree = function (obj, cb) {
console.log("called");
data=makeTreeData(obj);
cb.call(this,
    data);
}

initiate_jstree();

这里的gdata变量是一个全局变量，里面存放的是json格式的要加载的数据。这是 jsfiddle 上的代码 - http://jsfiddle.net/Lge8C/