json的多級嵌套菜單

Question

如何根據「id」和「pid」從我的JSON創建嵌套菜單（帶有「sub-sub-sub ...- n」）項目？

代碼細節：

id - item ID 
lvl - level of the item 
pid - parent ID of the item 
pos - position of the item 
nm - name of the item 

JSON：

[{"id":1,"lvl":0,"pid":0,"pos":0,"nm":"HomeTree"}, 
{"id":5,"lvl":1,"pid":1,"pos":0,"nm":"Books"}, 
{"id":2,"lvl":1,"pid":1,"pos":1,"nm":"Jobs"}, 
{"id":16,"lvl":1,"pid":1,"pos":2,"nm":"Music"}, 
{"id":17,"lvl":2,"pid":16,"pos":0,"nm":"Relax Sets"}, 
{"id":12,"lvl":1,"pid":1,"pos":3,"nm":"Cars"}, 
{"id":13,"lvl":2,"pid":12,"pos":0,"nm":"BMW"}, 
{"id":14,"lvl":1,"pid":1,"pos":4,"nm":"Web"}, 
{"id":15,"lvl":2,"pid":14,"pos":0,"nm":"PHP Analytics"}, 
{"id":18,"lvl":1,"pid":1,"pos":5,"nm":"Hardware"}, 
{"id":19,"lvl":2,"pid":18,"pos":0,"nm":"EVGA SR2 Upgrades"}, 
{"id":31,"lvl":2,"pid":18,"pos":1,"nm":"Keyboards"}, 
{"id":20,"lvl":1,"pid":1,"pos":6,"nm":"Movies"}, 
{"id":21,"lvl":1,"pid":1,"pos":7,"nm":"Games"}, 
{"id":22,"lvl":1,"pid":1,"pos":8,"nm":"Robots"}, 
{"id":25,"lvl":1,"pid":1,"pos":9,"nm":"Magazines"}, 
{"id":26,"lvl":2,"pid":25,"pos":0,"nm":"IT Security"}, 
{"id":27,"lvl":1,"pid":1,"pos":10,"nm":"Management"}, 
{"id":28,"lvl":2,"pid":27,"pos":0,"nm":"Holacracy"}, 
{"id":29,"lvl":3,"pid":28,"pos":0,"nm":"Testtt"}] 

我需要什麼：

HomeTree 
    Books 
    Jobs 
    Music 
    Relax Sets 
    Cars 
     BMW 
    Web 
     PHP Analytics 
    Hardware 
     EVGA SR2 Upgrades 
    Keyboards 
    Movies 
    Games 
    Robots 
    Magazines 
     IT Security 
    Management 
     Holacracy 
      Testtt 

我當前的代碼：

$.ajax({ 
    url: './jstree_head.php?operation=full_tree', 
    data: "", 
    dataType: 'json', 
    success: function(data) 
    { 
     var output="<br />"; 
     for (var i in data) 
     { 
       var rid = data[i].id; 
       var rpid = data[i].pid; 
       var rlvl = data[i].lvl; 
       var rnm = data[i].nm; 

       var nest = '&nbsp; &nbsp; &nbsp;'; 
       if(rpid > 1) { 
           nm = nest+rnm+'<br>'; 
          } 
       else {nm = rnm+'<br>';} 

      output+='' + nm + ''; 
     } 
     $('#content').html(output); 
    } 
}); 

現在我不能說明深層次的子層次，那麼正確的方法是什麼？

--- UPDATE ---

我想的是：

var nest = '     '; 
if(rpid > 1) { 
    nm = nest+rnm+'<br>'; 
} 
else {nm = rnm+'<br>';} 

output+='' + nm + ''; 

但這只是一個級別的父項。

Answer 1

由於你的輸出沒有格式化，我首先創建了一個父子子層次，然後用它來打印輸出。不是直接將值存儲在字符串中，而是使用JSON，因爲在那裏動態添加子元素更容易。

var data = [{"id":1,"lvl":0,"pid":0,"pos":0,"nm":"HomeTree"}, 
    {"id":5,"lvl":1,"pid":1,"pos":0,"nm":"Books"}, 
    {"id":2,"lvl":1,"pid":1,"pos":1,"nm":"Jobs"}, 
    {"id":16,"lvl":1,"pid":1,"pos":2,"nm":"Music"}, 
    {"id":17,"lvl":2,"pid":16,"pos":0,"nm":"Relax Sets"}, 
    {"id":12,"lvl":1,"pid":1,"pos":3,"nm":"Cars"}, 
    {"id":13,"lvl":2,"pid":12,"pos":0,"nm":"BMW"}, 
    {"id":14,"lvl":1,"pid":1,"pos":4,"nm":"Web"}, 
    {"id":15,"lvl":2,"pid":14,"pos":0,"nm":"PHP Analytics"}, 
    {"id":18,"lvl":1,"pid":1,"pos":5,"nm":"Hardware"}, 
    {"id":19,"lvl":2,"pid":18,"pos":0,"nm":"EVGA SR2 Upgrades"}, 
    {"id":31,"lvl":2,"pid":18,"pos":1,"nm":"Keyboards"}, 
    {"id":20,"lvl":1,"pid":1,"pos":6,"nm":"Movies"}, 
    {"id":21,"lvl":1,"pid":1,"pos":7,"nm":"Games"}, 
    {"id":22,"lvl":1,"pid":1,"pos":8,"nm":"Robots"}, 
    {"id":25,"lvl":1,"pid":1,"pos":9,"nm":"Magazines"}, 
    {"id":26,"lvl":2,"pid":25,"pos":0,"nm":"IT Security"}, 
    {"id":27,"lvl":1,"pid":1,"pos":10,"nm":"Management"}, 
    {"id":28,"lvl":2,"pid":27,"pos":0,"nm":"Holacracy"}, 
    {"id":29,"lvl":3,"pid":28,"pos":0,"nm":"Testtt"}]; 

var output="<br />"; 

var res = []; 
function createRelationship(){ 
    for (var i in data) 
    { 
     if(data[i].pid == 0 && data[i].id == 1){ 
      res.push({ 
      id: data[i].id, 
      nm: data[i].nm 
      }); 
     } 
     else{ 
      var parent = findParent(data[i].pid, res); 
      if(parent){ 
       if(!parent.items){ 
        parent.items = []; 
       } 
       parent.items.push({ 
        id: data[i].id, 
        nm: data[i].nm 
       }); 
      } 
     } 
    } 
} 

function findParent(pid, _res){ 
    if(_res){ 
     if(_res.id == pid){ 
      return _res; 
     } 
     var len = _res.length ? _res.length : _res.items ? _res.items.length : 0; 
     for(var i =0; i< len; i++){ 
      if(_res[i] && _res[i].id == pid){ 
       return _res[i]; 
      } 
      else{ 
       var child = _res[i] ? _res[i] : _res; 
       if(child){ 
        for(var j=0;j<child.items.length;j++){ 
         var res = findParent(pid, child.items[j]); 
         if(res){ 
          return res; 
         } 
        } 
       } 
      } 
     } 
    } 
    return null; 
} 



function printOutPut(obj, spaceCount){ 
    var space = ''; 
    for(var i = 0; i< spaceCount; i++){ 
     space+= '&nbsp;'; 
    } 
    output += space + obj.nm; 
    output += "<br />"; 
    if(obj.items){ 
     for(i = 0; i < obj.items.length; i++){ 
      printOutPut(obj.items[i], (spaceCount + 4)); 
     } 
    } 
} 

createRelationship(); 

for(var z =0; z<res.length;z++){ 
    printOutPut(res[z], 1); 
} 

document.write(output); 

Answer 2

由於您的數據是一個平面數組，而不是嵌套的JSON對象，所以不能使用遞歸函數。

相反，您可以遍歷所有元素，跟蹤父類列表，因爲lvl屬性發生更改。隨着lvl的增加，請將以前的元素添加到父母列表中，併爲以下所有項目使用此最新父項。隨着lvl減少，請從列表中刪除最新的父項，並將其在列表中使用之前的項目，而不是所有後續項目。