树视图的反向级别javascript

Question

请帮我出点javascript数组来创建treeview。该场景是我想创建与逆向层次树视图。 例如：

我在下面格式的数组：

var arr = [ 
     {'id':1 ,'parentid' : 0}, 
     {'id':2 ,'parentid' : 1}, 
     {'id':3 ,'parentid' : 1}, 
     {'id':4 ,'parentid' : 2}, 
     {'id':5 ,'parentid' : 0}, 
     {'id':6 ,'parentid' : 0}, 
     {'id':7 ,'parentid' : 4} 
]; 

，我试图在下面为了创建树形视图： 预期输出：

[ 
{ 
    "id": 1, 
    "parentid": 0, 
    level:4, 
    "children": [ 
    { 
    "id": 2, 
    "parentid": 1, 
    level:3, 
    "children": [ 
    { 
     "id": 4, 
     "parentid": 2, 
     level:2, 
     "children": [ 
     { 
     "id": 7, 
     "parentid": 4, 
     level:1 
     } 
     ] 
    } 
    ] 
    }, 
    { 
    "id": 3, 
    "parentid": 1, 
    level:3 
    } 
    ] 
}, 
{ 
    "id": 5, 
    "parentid": 0 
    level:4 
}, 
{ 
    "id": 6, 
    "parentid": 0, 
    level:4 
} 
] 

Answer 1

基本上任务得以解决在三个步骤中

1. 构建树
2. 得到最高水平
3. 应用水平

var arr = [{ 'id': 1, 'parentid': 0 }, { 'id': 2, 'parentid': 1 }, { 'id': 3, 'parentid': 1 }, { 'id': 4, 'parentid': 2 }, { 'id': 5, 'parentid': 0 }, { 'id': 6, 'parentid': 0 }, { 'id': 7, 'parentid': 4 }], 
 
    tree = function (array) { 
 

 
     function iterGet(o) { 
 
      if (Array.isArray(o.children)) { 
 
       maxLevel++; 
 
       o.children.forEach(iterGet); 
 
      } 
 
     } 
 

 
     function iterSet(level) { 
 
      return function (o) { 
 
       o.level = level; 
 
       Array.isArray(o.children) && o.children.forEach(iterSet(level - 1)); 
 
      } 
 
     } 
 

 
     var o = { id: 0 }, 
 
      maxLevel = 1; 
 

 
     array.forEach(function (a) { 
 
      o[a.id] = o[a.id] || { id: a.id }; 
 
      a.children = o[a.id].children; 
 
      o[a.parentid] = o[a.parentid] || { id: a.parentid }; 
 
      o[a.parentid].children = o[a.parentid].children || []; 
 
      o[a.parentid].children.push(o[a.id]); 
 
     }); 
 
     iterGet(o[0]); 
 
     iterSet(maxLevel)(o[0]); 
 
     return o[0].children; 
 
    }(arr); 
 

 
document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');