jsTree - オンデマンドでajax経由でサブノードをロードする

Question

私はサブノードのオンデマンドローディングで動作するjsTreeを取得しようとしています。私のコードはこれです：JSONは呼び出しから返さ

 
jQuery('#introspection_tree').jstree({ 
     "json_data" : { 
      "ajax" : { 
       url : "http://localhost/introspection/introspection/product" 
      } 
    }, 
    "plugins" : [ "themes", "json_data", "ui" ] 
    }); 

は、木が大きくなるだろう、各要素は、子どもたちの多くを持つことができ

 
[ 
    { 
    "data": "Kit 1", 
    "attr": { 
     "id": "1" 
    }, 
    "children": [ 
     [ 
     { 
      "data": "Hardware", 
      "attr": { 
      "id": "2" 
      }, 
      "children": [ 

      ] 
     } 
     ], 
     [ 
     { 
      "data": "Software", 
      "attr": { 
      "id": "3" 
      }, 
      "children": [ 

      ] 
     } 
     ] 
    ] 
    } 
    ..... 
] 

です。現在のところ、これは一度にツリー全体をロードしており、時間がかかることがあります。子ノードがユーザーによって開かれたときにオンデマンドロードを実装するためには、どうすればよいですか？

ありがとうございます。

Answer 1

アイリッシュカは正しい方向に私を指摘しましたが、私の問題を完全には解決しません。私は彼女の答えを聞いて、これを思いついた。 2つの異なるサーバー機能の使用は、分かりやすくするためにのみ行われます。最初のものは、第二の一方が与えられた商品コードのすべての子を一覧表示し、最上位レベルですべての製品を示します。

jQuery("#introspection_tree").jstree({ 
    "plugins" : ["themes", "json_data", "ui"], 
    "json_data" : { 
     "ajax" : { 
      "type": 'GET', 
      "url": function (node) { 
       var nodeId = ""; 
       var url = "" 
       if (node == -1) 
       { 
        url = "http://localhost/introspection/introspection/product/"; 
       } 
       else 
       { 
        nodeId = node.attr('id'); 
        url = "http://localhost/introspection/introspection/children/" + nodeId; 
       } 

       return url; 
      }, 
      "success": function (new_data) { 
       return new_data; 
      } 
     } 
    } 
}); 

データが関数から返されたJSONこの（=各ノードに閉じた状態に気付く）のようである：

 
[ 
    { 
    "data": "Kit 1", 
    "attr": { 
     "id": "1" 
    }, 
    "state": "closed" 
    }, 
    { 
    "data": "KPCM 049", 
    "attr": { 
     "id": "4" 
    }, 
    "state": "closed" 
    }, 
    { 
    "data": "Linux BSP", 
    "attr": { 
     "id": "8" 
    }, 
    "state": "closed" 
    } 
] 

スタティックデータは不要です。ツリーは、各レベルで完全に動的になりました。

Answer 2

は、ページのロードのツリーデータとしてルート要素を設定する必要があり、その後、あなたはより多くの詳細については、AJAX要求

$("#introspection_tree").jstree({ 
    "plugins": ["themes", "json_data", "ui"], 
    "json_data": { 
     //root elements 
     "data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number 
     "ajax": { 
      "type": 'POST', 
      "data": {"action": 'getChildren'}, 
      "url": function (node) { 
       var nodeId = node.attr('id'); //id="kit1" 

       return 'yuorPathTo/GetChildrenScript/' + nodeId; 
      }, 
      "success": function (new_data) { 
       //where new_data = node children 
       //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}] 
       return new_data; 
      } 
     } 
    } 
}); 

a similar question hereに私の答え（古い部分）を参照してくださいに自分の子供を取得することができるようになります

Answer 3

私は、デフォルトでの第1レベルのノードを表示して、子供たちをオンデマンドでロードすることをお勧めします。その場合、変更する必要があるのは、子ノードが要求に応じてロードされるノードに"state" : "closed"を追加することだけです。

あなたはあなたのコードが jsTreeドキュメント

NOTEから

"json_data": { 
    //root elements to be displayed by default on the first load 
    "data": [ 
     { 
      "data": 'Kit 1', 
      "attr": { 
       "id": 'kit1' 
      }, 
      "state": "closed" 
     }, 
     { 
      "data": 'Another node of level 1', 
      "attr": { 
       "id": 'kit1' 
      }, 
      "state": "closed" 
     } 
    ], 
    "ajax": { 
     url: "http://localhost/introspection/introspection/product", 
     data: function (n) { 
      return { 
       "nodeid": $.trim(n.attr('id')) 
      } 
     } 
    } 
} 

を変更するように、AJAX呼び出しにノードのIDを送信することを望むかもしれません

：両方のデータとAjaxは、初期ツリーはからレンダリングされた設定されている場合 データ列。閉鎖されたノード（子がロードされていない）を開くと、AJAX要求が行われます。

Answer 4

私はこの問題に数時間を費やしました。最後に、私はそのように得た：

$("#resourceTree").jstree({ 
    "types": { 
     "default": { 
     "icon": "fa fa-folder-open treeFolderIcon", 
     } 
    }, 
    "plugins": ["json_data", "types", "wholerow", "search"], 
    "core": { 
     "multiple": false, 
     "data": { 
     "url" : function(node){ 
      var url = "rootTree.json"; 
      if(node.id === "specialChildSubTree") 
      url = "specialChildSubTree.json"; 
      return url; 
     }, 
     "data" : function(node){ 
      return {"id" : node.id}; 
     } 
     } 
    }, 
    }); 

rootTree.json：

[ 
    { 
    "text": "Opened root folder", 
    "state": { 
     "opened": true 
    }, 
    "children": [ 
     { 
     "id" : "specialChildSubTree", 
     "state": "closed", 
     "children":true 
     } 
    ] 
    } 
] 

specialChildSubTree.json：

[ 
    "Child 1", 
    { 
    "text": "Child 2", 
    "children": [ 
     "One more" 
    ] 
    } 
] 

だから私は、AJAXロードされたサブツリーの親になるノードをマークIDを持って、私はコア構成で見ています。

注： 「状態」を持たなければならないことをノード：パラメータを「閉」と、それは パラメータ「子供」を持っている必要があります：真。

私はidの理由が数字で始まるされていない何