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

この読み込みが遅い問題に対処するには、いくつかの方法があります。

1 つの方法は、jstree の json_data プラグインで ajax メソッドを使用することです。Mike Tyka は、ここでそれを行うことについてかなりきちんとした説明を提供しています - http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

別の方法は、単純な JavaScript メソッドを使用することです。まだベータ版である jstree の v3 を使用することにオープンな場合です。私のプロジェクトでは、約 2200 のノードがあり、json データはサーバー側から 1 回の ajax 呼び出しを介して 1 秒以内に取得されました。しかし、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 に答える