tree structure traversal collection


let treeData=  [
        {
          id: "1",
          parentId: "",
          text: "高中",
          children: [
            {
              id: '1-1',
              parentId: '1',
              text: "高一",
              children: [
                {
                  id: '1-1-1',
                  parentId: '1-1',
                  text: "高一(1)班",
                  children: []
                },
                {
                  id: '1-1-2',
                  parentId: '1-1',
                  text: "高一(2)班",
                  children: []
                }
              ]
            },
            {
              id: '1-2',
              parentId: '1',
              text: "高二",
              children: [
                {
                  id: '1-2-1',
                  parentId: '1-2',
                  text: "高二(1)班",
                  children: []
                }
              ]
            }
          ]
        },
        {
          id: "2",
          parentId: "",
          text: "幼儿园",
          children: [
            {

              id: '2-1',
              parentId: '2',
              text: "大班",
              children: []
            },
            {

              id: '2-2',
              parentId: '2',
              text: "中班",
              children: []
            },
            {

              id: '2-3',
              parentId: '2',
              text: "小班",
              children: []
            }
          ]
        }
      ]

1. Traverse all child elements of the last level

 findChildrens(list, level = 0) {
  let arr = [];
  if (level >= 1000) {
    return arr;
  }
  level++;
  for (const item of list) {
    if (item.children && item.children.length>0) {
      arr = arr.concat(findChildrens(item.children, level));
    } else {
      arr.push(item);
    }
  }
  return arr;
}

let result = findChildren(treeData);

结果:[ {text:'高一(1)班',...} ,{text:'高一(2)班',...},{text:'高二(1)班',...},{text:'大班',...},{text:'中班',...},{text:'小班',...}]

2. Query yourself according to id

function findSelfById(list, id, level = 0) {
  if (level >= 1000) {
    return;
  }
  level++;
  let treeSign;
  for (const item of list) {
    if (item.id === id) {
      return item;
    } else if (!item.children) {
      continue;
    }
    treeSign = findSelfById(item.children, id, level);
    if (treeSign) {
      return treeSign;
    }
  }
}

let sign = findSelfById(treeData, '1-1-1');

结果:{text:'高一(1)班',...}


3. Query all parent elements of child nodes according to id

4. Query all child elements according to the parent element id

 findParentById(arr, id) {
      var pList = [];
      if (arr.length == 0) {
        return pList;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (node.id == nodeId) {
            pList.unshift({ ...node });
            rev(arr, node.parentId);
            break;
          } else {
            if (node.children) {
              rev(node.children, nodeId);
            }
          }
        }
        return pList;
      };
      pList = rev(arr, id);
      return pList;
    }

let list=findParentById(this.treeData, '1-1-1')

结果:[{text:'高中',...},{text:'高一',...},{text:'高一(1)班',...}]

5. Traverse the tree and update the field name

 formatTree(arr, level) {
      if (level >= 1000) {
        return;
      }
      level++;
      return arr.map(ele => {
        let val = {
          value: ele.id,
          label: ele.text,

        }
        if (ele.children.length > 0) {
          val.child = this.formatTree(ele.children, level)
        }
        return val
      })
    }

let newTree=formatTree(treeData)

结果:属性结构字段:id-value,text-label, children-child

Guess you like

Origin blog.csdn.net/weixin_38961329/article/details/125455447