树视图javascript的反向级别

Reverse level of treeview javascript

本文关键字：视图 javascript      更新时间：2023-09-26

请帮我用javascript数组创建树视图。场景是我想创建具有反向级别的树视图。例如：

我有一个以下格式的数组：

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
 }
]

基本上任务通过三个步骤解决

  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>');

相关文章：