jsTree：配列からajax/renderノードを持つprogressive_render

Question

これは​​に関するものです。私はしばらくの間、この問題に苦しんでいましたが、今は ではないことを認識していますので、以下の私の問題の解決策を考えました（これはうまくいきません）。

私はajaxでjson_dataプラグインを使用するツリーを持っています。 特定のノードを開くと、サーバーからの結果は1000個以上の jsonノードの配列になります。レスポンスはかなり速いですが、それ自体のレンダリングはしばらく（ユーザー体験は、彼が迷惑「スクリプトではありません 応答 - 継続/スクリプトを停止」取得することです をとる。メッセージを

私が送った結果を制限したことについて考えソリューション からサーバーを小さな番号（たとえば200）に戻し、いくつかの "詳細を表示" ラベル（またはjQueryスクロールイベントを使用）を使用して次の200をフェッチします。 ただし、これらの各ノードでjstree.createを使用すると非常に遅いです 私はこのスレッドに気付きましたon the jsTree google group ここでIvanはすべてのノードを同時に作成することをお勧めします parse_json関数 - これは私のためには機能しません。私は何をしようとしているの

短いコードスニペット： （クリックするとラベル「詳細を表示し」）：

$.ajax({ 
    // send data to server in order to get the relevant json back 
    }(), 
    success : function (r) { 
      var parent_node = data.inst._get_parent(data.rslt.obj); 
      var id = parent_node.attr("id"); 
      $("#root_tree").jstree("_parse_json", r, parent_node); 
      $("#root_tree").jstree("clean_node", parent_node, false); 
      } 
    }); 

上記の例では、JSONをレンダリングしに子を追加していません親ノードの

他の方法があれば誰でも指摘できると思います。 私は間違っています。ここでも 、使用して：

$.each(r, function(i, node) { 
     var id = parent_node.attr("id"); 
     $("#root_tree").jstree("create", "#"+id, "last", node, false, true); 
}); 

は、作業を行いますが、非常に非常にゆっくりと（一緒にすべての千個のノード をレンダリングするよりも遅いです）。

おかげ

Answer 1

[OK]をクリックします。 （

イワンが提案したものから

var ref = parent_node.attr("id"); 
$.each(data, function(i, jsonNode) { 
     var node = inst._parse_json(jsonNode); 
     node.insertInside(ref); 
}); 

Answer 2

は、これは私が私の木が設定した方法であると私は数百のノードにも持っており、それは魔法のように動作します。私はIE6/7では非常にわずかなパフォーマンスの問題を抱えていましたが、どこにいてもチャンピオンのように機能します。

$('#serverTree').bind("select_node.jstree", function (e, data) { 
     var url = data.rslt.obj.children("a:eq(0)").attr("href"); 
     if (url === "hasChild") { 
      data.inst.toggle_node(data.rslt.obj); 
     } 
     else { 
      //Do something when the leaf nodes are clicked 
     } 

    }).jstree({ 
     "themes": { "theme": "apple", "dots": false, "icons": false }, 
     "json_data": { 
      "ajax": { 
       "url": "/Home/GetNodes", 
       "data": function (n) { 
        return { id: n.attr ? n.attr("id") : 0 }; 
       } 
      } 
     }, 
     "plugins": ["themes", "json_data", "ui"] 
    }); 

これは、サーバーから戻ってくる私のJSONがどのように見えるかです：私の使用量が少しオフだったので、

[{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}}, 
"attr":{"id":"Node1","href":null},"state":"closed"}]