JSTree - 노드를 동적으로로드하십시오.

jstree v.3을 사용하고 있습니다. 나는 모든 데이터가 서버 측에서 ajax를 통해 한 번 다운로드되는 작업 예제가 있습니다.JSTree - 노드를 동적으로로드하십시오.

$('#tree').jstree({ 
      'core': { 
       'data': { 
        'url': "/ajax/getAll",       
        'data': function(node) { 
         return {'id': node.id}; 
        }, 
        // "check_callback" : true      
       } 
      }, 
      "types": { 
       "category": { 
        "icon": "/img/category.png" 
       }, 
       "page": { 
        "icon": "/img/page.png" 
       } 
      }, 
      "plugins" : ["types"] 

     });

는하지만 현재까지의 데이터 많은 있습니다. 클릭 한 항목에 대한 데이터를로드하고 싶습니다. 서버 측에 문제가 없지만 jstree 부분에 대한 예제를 찾을 수 없습니다. 아무도 코드를 공유하거나 조언을 줄 수 있습니까?

출처

2014-03-25 Vladimir Shevchenko

당신은 맞는 키워드를 찾을 수 없습니다. lazy loading이라고합니다.

$("#treeCell").jstree({ 
     "json_data" : { 
     "ajax" : { 
      "url" : function(node){ 
         // lets figure out the url - this function needs to 
         // return the formed URL. If "node" is "-1" then 
         // this is the top of the hierarchy and there's no parent 
         // key. Otherwise, node is a jquery object of 
         // the respective node from which we can fish out the 
         // metadata needed. (added below at "metadata" : op) 
         if(node == -1){ 
         return "/list?parentkey=" 
         } else { 
         return "/list?parentkey=" + node.data("key"); 
         } 
        }, 
      "type" : "get", // this is a GET not a POST 
      "success" : function(ops) { 
        // this is called when the AJAX request is successful. "ops" 
        // contains the returned data from the server, which in 
        // my case is a json object containing an array of objects. 
        data = [] 
        // go through data and create an array of objects to be given 
        // to jsTree just like when you're creating a static jsTree. 
        for(opnum in ops){ 
        var op = ops[opnum] 
        node = { 
         "data" : op.info, 
         "metadata" : op , 
         // THIS LINE BELOW IS THE MAGIC KEY!!! This will force 
         // jsTree to consider the node 
         // openable and thus issue a new AJAX call hen the 
         // user clicks on the little "+" symbol or 
         // whatever opens nodes in your theme 
         "state" : "closed" 
        } 
        data.push(node); 
        } 
        return data; // this will return the formed array 
           // "data" to jsTree which will turn 
           // it into a list of nodes and 
           // insert it into the tree. 
      } 
     }, 
     }, 
     "core" : {"html_titles" : true, "load_open" : true }, 
     "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort" ] 
    });

출처

2014-04-09 14:27:08

링크가 작동하지 않습니다. @Alexander Suraphel – Margo

@Margo not my website. 잠시 후 아마 될 것입니다. 당신이 이해하지 못하는 것은 무엇입니까? –

내가 코드를 시도하면 (물론 내 자신의 URL로) 나는 전혀 얻지 못합니다. 오류 없음, 로그 없음 ... 없음. 나는 버전 3.2.2의 jstree를 사용하고있다. 초기 아약스 쿼리도 표시되지 않습니다. – rajeev

당신이 URL로 클릭 한 노드의 ID를 전달하는 서버 측 데이터 요청을해야 할 것입니다 :

당신이 뭔가를 작성해야합니다. 트리가 초기화 될 때 동일한 메소드가 사용됩니다. 왼쪽 무엇

$('#tree').jstree({ 
    core: { 
     data: { 
      url: function(node) { 
       return "/ajax/get/" + node.id 
      }            
     } 
    } 
});

해당 노드의 직접 아이들을 반환하는 백엔드 방법이다. 이 문서에 대한 자세한 내용은 여기에서 확인할 수 있습니다. https://www.jstree.com/docs/json/

출처

2016-10-07 19:57:25

JSTree - 노드를 동적으로로드하십시오.

답변

관련 문제