• js将有父子关系的数据转换成树形结构数据


    js将有父子关系的数据转换成树形结构数据

    比如如下基本数据:

    let allDatas = [
      {
        id: 3,
        name: 'bbbb',
        parendId: 1
      },
      {
        id: 2,
        name: 'aaaaa',
        parendId: 2
      },
      {
        id: 4,
        name: 'ccccc',
        parendId: 1
      },
      {
        id: 5,
        name: 'ddddd',
        parendId: 4
      },
      {
        id: 6,
        name: 'eeeee',
        parendId: 4
      }, 
      {
        id: 7,
        name: 'ffff',
        parendId: 6
      },
      {
        id: 8,
        name: 'ggggg',
        parendId: 3
      },
      {
        id: 9,
        name: 'hhhhh',
        parendId: 5
      },
      {
        id: 10,
        name: 'jjjj',
        parendId: 6
      }
    ];

    需要转换成如下数据格式,如下:

    [
      {
        "id": 3,
        "name": "bbbb",
        "children": [
          {
            "id": 8,
            "name": "ggggg",
            "children": []
          }
        ]
      }, 
      {
        "id": 4,
        "name": "ccccc",
        "children": [
          {
            "id": 5,
            "name": "ddddd",
            "children": [
              {
                "id": 9,
                "name": "hhhhh",
                "children": []
              }
            ]
          }, 
          {
            "id": 6,
            "name": "eeeee",
            "children": [
              {
                "id": 7,
                "name": "ffff",
                "children": []
              }, 
              {
                "id": 10,
                "name": "jjjj",
                "children": []
              }
            ]
          }
        ]
      }
    ]

    如上id为8的父节点就是id为3的,而id为3的父节点为1,但是父节点目前没有,所以id为3就是顶级节点了。同理其他的也是一样的道理;

    JS代码如下:

    // 属性配置设置
    let attr = {
      id: 'id',
      parendId: 'parendId',
      name: 'name',
      rootId: 1
    };
    function toTreeData(data, attr) {
      let tree = [];
      let resData = data;
      for (let i = 0; i < resData.length; i++) {
        if (resData[i].parendId === attr.rootId) {
          let obj = {
            id: resData[i][attr.id],
            name: resData[i][attr.name],
            children: []
          };
          tree.push(obj);
          resData.splice(i, 1);
          i--;
        }
      }
      var run = function(treeArrs) {
        if (resData.length > 0) {
          for (let i = 0; i < treeArrs.length; i++) {
            for (let j = 0; j < resData.length; j++) {
              if (treeArrs[i].id === resData[j][attr.parendId]) {
                let obj = {
                  id: resData[j][attr.id],
                  name: resData[j][attr.name],
                  children: []
                };
                treeArrs[i].children.push(obj);
                resData.splice(j, 1);
                j--;
              }
            }
            run(treeArrs[i].children);
          }
        }
      };
      run(tree);
      return tree;
    }
    let arr = toTreeData(allDatas, attr);
    console.log(arr);
  • 相关阅读:
    Quick Start WCF 4.0 RESTful Service Setup
    (面向c#开发人员) 编写javascript的好习惯六 for 表达式
    复习HTTP 14.4 HTTP Header AcceptLanguage
    visual studio 2010 中的 javascript 智能提示
    NewSlot and ReuseSlot
    复习HTTP 14.1 HTTP Header Accept (RFC 2616)
    (面向c#开发人员) 编写javascript的好习惯九 匿名自执行函数
    JQuery Template Engine 简介 1
    jquery 教程
    微博划词转发
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/9275958.html
Copyright © 2020-2023  润新知