处理常见的树形结构的递归方法

一、

后台设计一张分类表的时候,如果有多级分类,通常会这样设计,使用parentId来标注它的父级是哪条数据,而且这种分类往往是不确定多少级:
处理常见的树形结构的递归方法_第1张图片

这种数据,对于后端来说只是一条条数据,而对于前端来说,必须把这样的数据转化为树形数据,此时可以使用递归方法类解决此类问题:

后端传过来的数据:
处理常见的树形结构的递归方法_第2张图片

最终的转化的数据格式如下:
处理常见的树形结构的递归方法_第3张图片

递归算法:

支持无限极分类。

function toArrayTree(array, parentId) {
  if(!Array.isArray(array)) {
    return [];
  }
  let result = [];
  for(let i = 0; i < array.length; i ++) {
    let c = array[i];
    // 拿第一条数据来说,判断第一条的parentId 是否等于传进来的 0,如果等于,
    // 说明第一条数据是第一级,然后接着拿出第一条的id,递归,判断是否有子节点。
    if(Number(c.parentId) === Number(parentId)) {
      result.push(c);
      // 关键:判断c的id下是否有孩子children
      let children = this.toArrayTree(array, c.id)
      if(children.length) {
        c["children"] = children; 
      }
    }
  }
  return result;
}
// data: 后端传过来的数据
// 0: 一级父id,没有上级,一般会与后端约定好,或者后端定好了
toArrayTree(data, 0)

效果如下:
处理常见的树形结构的递归方法_第4张图片

 

二、删除树节点

如果前端树种有删除功能,当删除父节点时,父节点下的所有子节点也需要被删除,这种操作可以使用递归算法来解决

处理常见的树形结构的递归方法_第5张图片

// 递归遍历查找要删除的id result -> []
function getDelateIds(list, id) {
  list.forEach((item, index) => {
    let rowId = item["id"]
    if(rowId === id) {
      // 将目标id存放到结果集数组中
      deleteIds.push(id);
      // 遍历所有子节点
      const children = item.children;
      if(!!children) {
        children.forEach(sonItem => {
          this.getDelateIds(children, sonItem.id);
        })
      }
    }else {
      const children = item.children;
      if(!!children) {
        this.getDelateIds(children, item.id)
      }
    }
  })
  return deleteIds;
}
// list: 树形数据; id:要删除的节点id
getDeleteIds(list, id)

你可能感兴趣的:(vue)