jsTree - tải subnodes qua ajax theo yêu cầu

Question

Tôi đang cố gắng để có được một jsTree làm việc với nhu cầu tải subnodes. Mã của tôi là thế này:

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

Các json trở về từ cuộc gọi là

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

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

      ] 
     } 
     ] 
    ] 
    } 
    ..... 
] 

Mỗi phần tử có thể có rất nhiều trẻ em, cây sẽ là lớn. Hiện tại, việc này đang tải toàn bộ cây cùng lúc, có thể mất chút thời gian. Tôi phải làm gì để thực hiện theo yêu cầu tải các nút con khi chúng được mở bởi người dùng?

Xin cảm ơn trước.

Answer 1

Irishka đã chỉ cho tôi đúng hướng, nhưng không giải quyết được hoàn toàn vấn đề của tôi. Tôi nghịch ngợm với câu trả lời của mình và nghĩ ra điều này. Sử dụng hai chức năng máy chủ khác nhau chỉ được thực hiện để làm rõ. Người đầu tiên liệt kê tất cả các sản phẩm tại cấp cao nhất, là thứ hai liệt kê tất cả các trẻ em của một productid đưa ra:

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; 
      } 
     } 
    } 
}); 

các json dữ liệu trả về từ các chức năng là như thế này (chú ý nhà nước = đóng cửa vào mỗi nút):

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

Không cần dữ liệu tĩnh, cây giờ đây hoàn toàn năng động trên mỗi cấp.

Answer 2

bạn cần phải thiết lập các yếu tố gốc như dữ liệu cây trên tải trang và sau đó bạn sẽ có thể lấy con cái của họ với một yêu cầu 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; 
      } 
     } 
    } 
}); 

Xem câu trả lời của tôi để a similar question here (phần cũ) để biết thêm chi tiết

Answer 3

Tôi đoán sẽ tốt hơn nếu hiển thị theo mặc định nút cấp đầu tiên và sau đó trẻ em sẽ được tải theo yêu cầu. Trong trường hợp đó, điều duy nhất bạn phải sửa đổi là thêm "state" : "closed" vào các nút có nút con sẽ được tải theo yêu cầu.

Bạn có thể muốn gửi id nút trong cuộc gọi ajax vì vậy bạn sửa đổi mã của bạn

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

Từ jsTree tài liệu

LƯU Ý: Nếu cả dữ liệu và ajax được thiết lập cây ban đầu được trả lại từ chuỗi dữ liệu. Khi mở một nút đóng (không có con đã tải), yêu cầu AJAX được thực hiện.

Answer 4

Tôi dành hàng giờ cho vấn đề này. Cuối cùng tôi đã nhận nó theo cách đó:

$("#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" 
    ] 
    } 
] 

Vì vậy, tôi đánh dấu nút đó trở thành mẹ của ajax nạp subtree với id, tôi xem trong cấu hình lõi.

LƯU Ý: Nút đó phải có thông số "trạng thái": "đóng" và phải có thông số "trẻ em" .

Tôi đang sử dụng jsTree.js trong phiên bản 3.3.3