2021-11-05

这段代码提供了一个JavaScript函数,用于将包含id和parentId属性的后端数据转换成树形结构。通过遍历数据,构建一个childrenListMap和nodeIds映射,然后递归地将子节点添加到对应的父节点下,最终形成树结构。此函数适用于构建层级关系的数据展示,如组织结构或文件目录。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

后端含有id和parentId的数据与树结构数据转换

代码如下,代码注释里写了必要的解释,不赘述

/**
 * des: 公共工具类
 */

/**
 * 构造树型结构数据
 * @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 = [];
    var result=[]
/**
 * childrenListMap:{
 * pId1:[],
 * pId2:[]
 * }
 */
    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);
    }
/**
 * 所有包含级父的必要条件是,该层级的pId是某一级的id
 * push最顶级元素进tree
 */
    for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
            tree.push(d);
        }
    }
// 初步拿到包含最顶级的tree
    for (let t of tree) {
        adaptToChildrenList(t);
    }
/**
 * 
 * 如果id有作为pId出现,那么其children在childrenListMap里
 * 如果children有值,继续循环看children的元素是否有children
 */
    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);
            }
        }
    }
// 查询父级机构需要用到nodesId,直接传出去
    result.push(tree)
    result.push(nodeIds)
    return result;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值