jsTree: progressive_render với ajax/render các nút từ một mảng

Question

Điều này liên quan đến jsTree jQuery plugin. Tôi đã đấu tranh với điều này trong một thời gian bây giờ chỉ để nhận ra nó không (nguyên bản) có thể làm, vì vậy tôi nghĩ về giải pháp sau đây cho vấn đề của tôi dưới đây (mà không hoạt động).

Tôi có cây sử dụng plugin json_data với ajax. Khi bạn mở một nút cụ thể, kết quả từ máy chủ là một mảng gồm hơn 1000 nút json. Câu trả lời là khá nhanh nhưng render bản thân mất một thời gian (kinh nghiệm người dùng là anh nhận được sự khó chịu "kịch bản không đáp - ngăn chặn kịch bản/tiếp tục". Nhắn

Giải pháp Tôi nghĩ về đã hạn chế kết quả gửi trở lại từ máy chủ đến một số nhỏ hơn (nói 200) và sử dụng một số nhãn "hiển thị thêm" (hoặc sử dụng sự kiện cuộn jQuery) để tìm nạp 200 tiếp theo. Tuy nhiên, việc sử dụng jstree.create trên mỗi nút đó xuất hiện rất chậm Sau đó tôi nhận thấy chủ đề này on the jsTree google group trong đó Ivan đề xuất có thể tạo tất cả các nút cùng một lúc bằng cách sử dụng chức năng parse_json - điều này không hiệu quả đối với tôi.

Một đoạn mã ngắn về những gì tôi đang cố gắng để làm: (khi nhấp vào "hiển thị nhiều hơn" nhãn):

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

Ví dụ trên không làm cho json và thêm trẻ em nút cha .

Tôi đánh giá cao bất kỳ cách tiếp cận nào khác hoặc nếu có ai có thể trỏ tới tôi đang làm gì sai. Một lần nữa, sử dụng:

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

Liệu công việc, nhưng rất rất chậm (chậm hơn so với render tất cả 1000 nút với nhau).

Cảm ơn

Answer 1

Ok, vì vậy sử dụng của tôi là một chút đi.

Những gì tôi đã kết thúc làm gọi hàm trên màn hình cây thay vì lắng nghe sự kiện:

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

Answer 2

Đây là cách tôi đã cây của tôi thành lập và tôi có hơn một vài trăm nút và nó hoạt động như một nét duyên dáng. Tôi đã có một vấn đề hiệu suất rất rất nhỏ trong IE6/7 nhưng hoạt động như một nhà vô địch ở khắp mọi nơi khác.

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

Đây là cách JSON của tôi trở lại từ máy chủ trông giống như:

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