jsTree : 배열에서 ajax/render 노드를 사용하는 progressive_render

Question

이것은 jsTree jQuery plugin에 관한 것입니다. 나는 잠시 동안 이걸로 고민해왔다. 지금은 단지 이 아니라는 것을 알기에, 아래의 (문제가되는) 내 문제에 대한 해결책을 생각했다.

아약스와 json_data 플러그인을 사용하는 트리가 있습니다. 특정 노드를 열면 서버의 결과는 1000 개 이상의 json 노드의 배열입니다. 응답은 꽤 빨리하지만 자체 렌더링은 잠시 (사용자 경험은 그가 성가신 "스크립트가 응답하지 - 계속/스크립트를 중지"얻을 수 있다는 것입니다합니다. 메시지를

내가 보낸 결과를 제한 한 생각이 솔루션 에서 서버를 더 작은 수 (예를 들어 200)로 다시 가져오고 "show more" 레이블 (또는 jQuery 스크롤 이벤트 사용)을 사용하여 다음 200을 가져옵니다. 그러나 각 노드에서 jstree.create를 사용하는 것이 나타납니다매우 느림. 다음이 스레드를 발견했습니다. on the jsTree google group 이반은 모든 노드를 한 번에 만들 수 있음을 제안했습니다. parse_json 함수 - 이것은 나를 위해 작동하지 않습니다.

내가 할 노력하고있어의 짧은 코드 : 를 (이하 "더보기"라벨을 클릭하면) :

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

는 위의 예는 JSON을 렌더링하지 않고는 아이들을 추가 상위 노드

나는 다른 접근 방식을 고맙게 여기며 누군가가 가리킬 수 있다면 무엇을 잘못했는지 알 수 있습니다. 다시 사용 : 아주 아주 천천히

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

일을합니까,하지만 (느린 함께 모든 1000 개 노드 렌더링 이하).

감사

Answer 1

좋아, 그래서 내 사용이 약간 떨어져이었다 : 서버에서 돌아 오는 내 JSON의 모습을 어떻게

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

이입니다. (

이반은 무엇을 제안에서

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

Answer 2

이것은 내 나무가 설정 한 방법이며, 내가 몇 백 노드를 통해 잘 가지고 그것이 마치 마법처럼 작동합니다. 저는 IE6/7에서 아주 약간의 성능 문제가 있었지만 다른 곳에서는 챔피언처럼 작동합니다.

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