【JS】扁平树数据转为树结构

扁平数据

转为最终效果

js 复制代码
[{"label":"疼逊有限公司","code":"1212","disabled":false,"parentId":"none","children":[{"label":"财务部","code":"34343","disabled":false,"parentId":"1212"},{"label":"人事部","code":"43434","disabled":false,"parentId":"1212"},{"label":"经营 部","code":"53543","disabled":false,"parentId":"1212","children":[{"label":"市场部","code":"23232","disabled":true,"parentId":"53543"},{"label":"销售部","code":"3435435","disabled":false,"parentId":"53543"}]}]}]

js 复制代码
/**
 * 删除子级数据为空的子级
 * @param {[]} node 
 * @param {string} [childKey='children'] 子级字段 默认-children
 * @returns {[]}
 */
const removeNoneDataChildren = (node, childKey = 'children') => {
    const remove = nodeItem => {
        if (nodeItem[childKey] && nodeItem[childKey].length === 0) {
            delete nodeItem[childKey];
        } else if (nodeItem[childKey]) {
            nodeItem[childKey].forEach(remove);
        }

    }
    node.forEach(remove);
    return node
}

/**
 * 扁平数据转树结构
 * @param {[]} flatList 扁平化树的数据
 * @param {String} [idKey="id"] 主字段 默认-id
 * @param {String} [parentKey="parentId"] 父级字段 默认-parentId
 * @param {string} [childKey='children'] 子级字段 默认-children
 * @param {boolean} [delNoneDataChildren=true] 删除子级数据为空的子级 默认-true
 * @returns {[]}
 */
const buildTree = (flatList, idKey = 'id', parentKey = 'parentId', childKey = 'children', delNoneDataChildren = true) => {
    const map = {};
    const roots = [];

    flatList.forEach(item => {
        map[item[idKey]] = { ...item, [childKey]: [] };
    });

    flatList.forEach(item => {
        const itemId = item[idKey];
        const parentId = item[parentKey];

        if (parentId !== null && map[parentId]) {
            map[parentId][childKey].push(map[itemId]);
        } else {
            roots.push(map[itemId]);
        }
    });

    if (delNoneDataChildren) return removeNoneDataChildren(roots, childKey);
    return roots;
}


// 使用
const test =[{label:'疼逊有限公司',code:'1212',disabled:false,parentId:'none'},{label:'财务部',code:'34343',disabled:false,parentId:'1212'},{label:'人事部',code:'43434',disabled:false,parentId:'1212'},{label:'经营部',code:'53543',disabled:false,parentId:'1212'},{label:'市场部',code:'23232',disabled:true,parentId:'53543'},{label:'销售部',code:'3435435',disabled:false,parentId:'53543'}];
// 使用自定义字段
const tree = buildTree(test, 'code', 'parentId', 'children');
console.log("1 ~ tree:", JSON.stringify(tree))
相关推荐
鹏多多.24 分钟前
flutter-使用AnimatedDefaultTextStyle实现文本动画
android·前端·css·flutter·ios·html5·web
用户849137175471631 分钟前
JDK 17 实战系列(第3期):性能优化与系统增强详解
java·后端·性能优化
Asu52021 小时前
思途spring学习0807
java·开发语言·spring boot·学习
遇见火星1 小时前
Jenkins全链路教程——Jenkins用户权限矩阵配置
java·矩阵·jenkins
埃泽漫笔1 小时前
什么是SpringBoot
java·spring boot
似霰1 小时前
安卓系统属性之androidboot.xxx转换成ro.boot.xxx
android·gitee
zhang1062091 小时前
PDF注释的加载和保存的实现
java·开发语言·pdf·pdfbox·批注
码银2 小时前
什么是逻辑外键?我们要怎么实现逻辑外键?
java·数据库·spring boot
0wioiw02 小时前
Android-Kotlin基础(Jetpack①-ViewModel)
android
SugarFreeOixi2 小时前
Idea打包可执行jar,MANIFEST.MF文件没有Main-Class属性:找不到或无法加载主类
java·jar