我们在做增删改查的过程中,无可避免的遇到树表数据,但是有些后端不懂事,查出来的数据都是列表如图中数据库
如上图,计算机下有“显示器”和“测试器”,“测试器”下又有“测试PC”,如果测试PC下面还有呢?这该咋办呢,后端比较懒,他直接吧数据查询出来扔给我了,让我去处理,一下提供前端解决处理方案
前端代码:
工具util
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
*/
export function handleTree(data, id, parentId, children) {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
如何使用呢?直接用,其实只需要两个参数,一个是数据,另一个是依据什么字段来构成组织成树表结构
handleTree(res.rows, "id");