JS树加载时间问题

JS tree Loading time issue

本文关键字：问题 时间 加载 JS      更新时间：2023-09-26

我已经用js树实现了Tree，在加载树时我得到了很多时间（大约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();
        });

负载js tree 的html

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

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

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

一种方法是在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/

相关文章：