树视图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}
];  

我正在尝试按以下顺序创建treeview： 预期产出：

 [
 {
  "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>');