Как создать jstree на основе данных json?

Question

Я создаю JsTree с данными json. дерево создается до второго уровня, но после второго дерева не заполняется. Я хочу, чтобы рекурсивно вызывать функцию, чтобы добавить лист к ней, пока лист не выйдет. Ниже мой Json:

[ { 
    "id" : 25, 
    "name" : "Output", 
    "path" : "/", 
    "type" : "folder", 
}, { 
    "id" : 26, 
    "name" : "Templates", 
    "path" : "/", 
    "type" : "folder", 
}, { 
    "id" : 27, 
    "name" : "Temp", 
    "path" : "/Output/", 
    "type" : "folder", 
}, { 
    "id" : 28, 
    "name" : "December", 
    "path" : "/Output/", 
    "type" : "folder", 
}, { 
    "id" : 29, 
    "name" : "ParameterDOC", 
    "path" : "/Templates/DecemberTemplates/", 
    "type" : "Doc", 
}, { 
    "id" : 30, 
    "name" : "SimpleDoc", 
    "path" : "/Templates/DecemberTemplates/", 
    "type" : "Doc", 
}, { 
    "id" : 31, 
    "name" : "DecemberTemplates", 
    "path" : "/Templates/", 
    "type" : "folder", 
}, { 
    "id" : 32, 
    "name" : "NovemberTemplates", 
    "path" : "/Templates/", 
    "type" : "folder", 
} ] 

и код:

function createTreeForDoc(jsonData,path,id){ 
for(var i=0; i < jsonData.length;i++){ 
    if(jsonData[i].path == path){ 
     $("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[i].name+"</li>").appendTo("#maptree"); 
     createSubTree(jsonData,jsonData[i].path+jsonData[i].name+"/",jsonData[i].name,i); 
    } 
} 

    $('#rptTree').jstree({ 
     "plugins" : ["types"], 
     "core" : { "check_callback" : false, "themes" : { "dots" : false }, }, 

     }); 
} 

function createSubTree(jsonData,path,gid,counter){ 
$("<ul id=\"test"+counter+"\"></ul>").appendTo("#"+gid); 

for(var i=0; i < jsonData.length;i++){ 

    if(jsonData[i].path == path){ 
     $("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" >"+jsonData[i].name+"</li>").appendTo("#test"+counter); 

    } 
} 
} 

и сейчас я получаю эту:

так это создает до третьего уровня второго уровня не создается, как рекурсивно вызывать функцию для создания всех остальных уровней.

Answer 1

Я не могу получить то, что вы пытаетесь сделать, но, посмотрев ваши данные JSon вы можете сделать в следующем way.Here я использую рекурсивную функцию:

function filterData(globalData,parentPath){ 
var result=[]; 
for(var i =0; i<globalData.length;i++){ 
    if(globalData[i].path == parentPath){ 
     result.push(data[i]); 
    } 
} 
return result; 
} 


function renderTree(data,parentNodeId) 
{ 

    for (var i=0; i<data.length;i++) 
     { 

     if(data[i].type == 'folder') 
      { 
      $("<li id="+data[i].name+ ">"+data[i].name+"</li>").appendTo($('#'+parentNodeId)); 

      var childNodes=filterData(globalData,data[i].path+data[i].name+"/"); 
      if(childNodes.length > 0) 
       { 
       $("<ul id="+data[i].path+data[i].name+"></ul>").appendTo($('#'+data[i].name)); 
       renderTree(childNodes,data[i].path+data[i].name);  
       } 

      } 
     else 
      { 
     $("<li id="+data[i].name+">"+data[i].name+"</li>").appendTo($('#'+parentNodeId)); 
      } 
} 

надеюсь, что это сработает.

Answer 2

Вы должны использовать рекурсивную функцию для создания своего дерева. Эта функция должна выглядеть следующим образом:

function recursive(jsonData,parent,counter=0) 
{ 
    $("<li id="+parent.path+parent.name+" class=\"lib\" rel="+parent.path+" >"+parent.name+"</li>").appendTo("#test"+counter); 
    counter = 0; 
    for(a = 0; a<jsonData.length; a++) 
    { 
     if((parent.path+ parent.name) == jsonData[a].path) 
     { 
      $("<li id="+jsonData[a].path+jsonData[a].name+" class=\"lib\" rel="+jsonData[a].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[a].name+"</li>").appendTo("#maptree"); 

      if(jsonData[a].type == "folder") 
      { 
       recursive(jsonData,jsonData[a],counter); 
      } 
     } 
    counter++; 
    } 
} 

Это пример, я notsure это работает, но это может быть достаточно близко для вас, чтобы улучшить его. :)

Успехов ...