美文网首页
二维树形数据转化标准层级树形结构数据

二维树形数据转化标准层级树形结构数据

作者: Maker丶 | 来源:发表于2019-08-09 13:23 被阅读0次

    方法一:按层级遍历

    function treeOptionsFromQueryResult1(data, id, pid, rootPid) { 
    //data:源数据,id:元素id,pid:父元素id;rootPid:根节点id
      const parentChildrenMap = {}; //首先构造所有父子关系的对象,即每一层数据与下级数据对应关系
      each(data, (row) => {
        if (parentChildrenMap[row[pid]] === undefined) {
          parentChildrenMap[row[pid] = [];
        }
        parentChildrenMap[row[pid].push({
          id: row[id],
          children: [],
          name: row.name,
        });
      });
      let q = [];
      q.push(parentChildrenMap[rootPid][0]);//可以理解为children元素,首次push根节点
      while (q.length > 0) { //判断如果p长度大于0执行逻辑,与下面每次shift删除首元素构成遍历
        const curNode = q.shift();//取到当前节点就是q里面的首节点,并在q里面删除
        curNode.children = parentChildrenMap[curNode.id];//根据之前父子对应关系给当前节点赋予children子元素集合
        q = union(q, curNode.children); //union为lodash库里面的方法,遍历children元素,为每一项赋它的子元素集合
      }
      return parentChildrenMap[rootPid];//返回对象里面的根节点对应的值
    }
    

    方法二:

    function getTreeData(data, id, pid, children, rootPid) {
      const cloneData = JSON.parse(JSON.stringify(data));
      return cloneData.filter((father) => {
        const childrenArr = cloneData.filter(child => father[id] === child[pid]);
        father[children] = childrenArr.length > 0 ? childrenArr : '';
        return father[pid] === rootPid;
      });
    }
    

    相关文章

      网友评论

          本文标题:二维树形数据转化标准层级树形结构数据

          本文链接:https://www.haomeiwen.com/subject/arncjctx.html