一、
后台设计一张分类表的时候,如果有多级分类,通常会这样设计,使用parentId来标注它的父级是哪条数据,而且这种分类往往是不确定多少级:
这种数据,对于后端来说只是一条条数据,而对于前端来说,必须把这样的数据转化为树形数据,此时可以使用递归方法类解决此类问题:
后端传过来的数据:
最终的转化的数据格式如下:
递归算法:
支持无限极分类。
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)
效果如下:
二、删除树节点
如果前端树种有删除功能,当删除父节点时,父节点下的所有子节点也需要被删除,这种操作可以使用递归算法来解决
// 递归遍历查找要删除的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)