Question

我用js树实现了树，这里加载树时我花了很多时间（大约1分钟）..

我想找到减少时间的方法，并且在我的实施中已超过5000 nodes。

在我看来

$("#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 tree

            <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/

JS树加载时间问题

1 个答案: