Question

我正在使用json Data创建JsTree。树创建到第二级，但是在第二级之后树没有填充。我想以递归方式调用函数来向它添加叶子，直到叶子不退出。以下是我的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); 

     }
}
}

现在我正在解决这个问题：

enter image description here

所以这创建直到第二级第三级没有创建如何递归调用函数来创建所有其他级别结束。

Answer 1

我无法得到您想要做的事情，但通过查看您的json数据，您可以通过以下方式执行。这是我使用递归函数：

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++;
     }
}

这是一个例子，我不确定它是否有效但是你可能需要加强它。：）

祝你好运......

如何基于json Data创建jstree？

2 个答案: