jsTree - 通過ajax按需加載子節點

我試圖讓jsTree按需加載子節點。我的代碼是這樣的：jsTree - 通過ajax按需加載子節點

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

JSON的從調用返回的

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

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

      ] 
     } 
     ] 
    ] 
    } 
    ..... 
]

每個元素都可以有很多孩子，樹將是很大的。目前這是一次加載整棵樹，這可能需要一些時間。當用戶打開子節點時，我需要做些什麼來實現按需加載的子節點？

在此先感謝。

來源

2011-11-10 Christian Waidner

Irishka指出我在正確的方向，但並未完全解決我的問題。我擺弄着她的答案，並提出了這個問題。使用兩種不同的服務器功能只是爲了清晰起見。第一個列出全部產物的頂層，第二個列出給定的productid的所有子：

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" 
    } 
]

不需要靜態數據，樹現在在每個級別上都是完全動態的。

來源

2011-11-11 12:49:09

非常感謝！我試圖弄清楚這一點浪費了太多時間。從文檔中不太清楚。 –

+13

文檔很糟糕...至少在jstree開頭 – bbqchickenrobot

非常感謝。返回的數據結構對我特別有幫助，因爲我在錯誤的假設下工作，返回的JSON應該是一個將子對象作爲數組的對象，而不是數組本身。 – arvidkahl

你需要設置根元素在頁面加載樹的數據，然後你就可以用一個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（老城區）的更多詳細信息，找回自己的孩子

來源

2011-11-10 11:30:37 Irishka

jsTree.js什麼是對ID的原因不能以數字開始？ –

語法屬性值值\t說明 id \t指定元素的唯一ID。命名規則：必須以字母AZ或az開頭可以後跟：字母（A-Za-z），數字（0-9），連字符（「 - 」）和下劃線（「_」）在HTML中，所有的值都是不區分大小寫的請看這裏[http://www.w3schools.com/tags/att_standard_id.asp] – Irishka

謝謝，沒有想到這一點。 –

我想這將是很好的默認顯示第一級節點然後孩子將按需加載。在這種情況下，唯一需要修改的是將"state" : "closed"添加到其子節點將按需加載的節點。

您不妨發送節點的ID在Ajax調用，所以你修改代碼

"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')) 
      } 
     } 
    } 
}

從jsTree文檔

注：如果數據和阿賈克斯都設置初始樹從渲染數據字符串。當打開一個封閉的節點（沒有加載子節點）時，會產生一個AJAX請求。

來源

2011-11-10 23:33:02 Radek

我在這個問題上花了數小時。最後我得到了這樣的說法：

$("#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，我注意在覈心配置。

注：該節點必須具有「狀態」：「關閉」參數，它必須有參數「孩子」：真。

我正在使用3.3.3版

來源

2017-01-11 12:07:36 Ruwen

jsTree - 通過ajax按需加載子節點

回答

相關問題