2

我已经用 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将递归调用并加载树节点..有什么方法可以减少时间？

4

1 回答 1

0

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

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

另一种方法是通过简单的 javascript 方法 - 如果您愿意使用仍处于 beta 版本的 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/

于 2014-01-22T15:24:02.020 回答