jsTree: async loading

Question

Tôi đang cố gắng sử dụng plugin jQuery (jsTree) này trong một dự án của tôi.
Tất cả những người khác tôi đã tìm thấy chưa được cập nhật gần đây.
Dù sao, tôi đang sử dụng plugin này để tải cấu trúc thư mục nhưng tôi muốn thực hiện thao tác này không đồng bộ. Các ví dụ tôi đã tìm thấy trên trang web của họ (được gọi là async) là vô lý. Tôi đã thử kiểm tra trên Internet nhưng có vẻ như hầu hết mọi người đều tải toàn bộ cây. Tôi muốn tải chi nhánh trên mỗi lần nhấp nút. Tôi đang sử dụng JSON.

Thank trước

Answer 1

Tôi đang sử dụng này với jsTree trong jQuery 1,4 vào lúc này, đây là một ví dụ, nó rất không nén để làm cho nó một chút rõ ràng hơn:

$("#QuickNav").tree({ 
    data: { 
    async: true, 
    type: "json", 
    opts: { 
     method: "POST", 
     url: rootPath + "QuickNav" 
    } 
    }, 
    callback: { 
    beforedata: function(NODE, TREE_OBJ) { 
     return $(NODE).attr("id") === "" ? 
     { id: $(NODE).find("a:first").attr("id")} : 
     { id: $(NODE).attr("id") || 0 }; 
    }, 
    onchange: function(NODE) { 
     document.location.href = $(NODE).children("a:first").attr("href"); 
    } 
    } 
}); 

Một ví dụ về JSON Tôi đang quay trở lại từ Url đó:

[{ 
    "data": { 
     "title": "Title (<b link='/Thing/200' class='gtp'>Go to Page</b>)", 
     "attributes": { 
      "href": "#", 
      "id": "200" 
     } 
    }, 
    "state": "closed" 
}] 

Id có điều duy nhất được chuyển vào cuộc gọi lại phương thức dịch vụ web của tôi, dẫn đến JSON như thế này được trả lại:

[{ 
    "data": { 
     "title": "Sites", 
     "attributes": { 
      "href": "#", 
      "class": "TreeTitle" 
     } 
    }, 
    "state": "open", 
    "children": [ 
     { 
      "data": { 
       "title": "00001 - Test Thing", 
       "type": "link", 
       "attributes": { 
        "href": "/Site/39063", 
        "class": "TL" 
       } 
      } 
     }, 
     { 
      "data": { 
       "title": "00002 - Test Thing 2", 
       "type": "link", 
       "attributes": { 
        "href": "/Site/39069", 
        "class": "TL" 
       } 
      } 
     } 
    ] 
}]