JS通过List列表生成树结构

叁歲伎倆 2022-11-06 07:53 164阅读 0赞

/** * @param {Array} nodes: 原始树结点 * * * @param {Object} config: * { * id: '', * pid: '', * sn: '' * } */
    function arrayToTree(nodes, config) { 
        if (!Array.isArray(nodes)) { 
            console.error('params arr need Array');
            return [];
        }
    
        let cfg = Object.assign(config, { id: 'id', pid: 'pid', sn: 'sn', order: false});
        let keyName = cfg.id;
        let parentKeyName = cfg.pid;
        let sn = cfg.sn;
        let order = cfg.order;
        
        let map = { };
        nodes.forEach(v => { 
            v.children = [];
            map[v[keyName]] = v;
        });
        map[0] = { [keyName]: 0, name: 'root', children: []};
        nodes.forEach(v => { 
            let children = map[v[parentKeyName]].children;
    
            // 当前第一个节点，直接放入children数组
            if (children.length == 0) { 
                children.push(v);
                return true;
            }
            
            // 序号小的节点排在前面，否则往后放
            if (order) { 
                let i = 0;
                for (let len = children.length; i < len; i++) { 
                    if (v[sn] < children[i][sn]) { 
                        break;
                    }
                }
                children.splice(i, 0, v);
            } else { 
                children.push(v);
            }
            
        });
        return map[0].children;
    }
    
    
    var nodes = [
     {  "id": "1", "pid": 0, "name": "财务部", "orderNum": 1 },
     {  "id": "2", "pid": 0, "name": "车队", "orderNum": 1 },
     {  "id": "3", "pid": 2, "name": "一车队", "orderNum": 1 },
     {  "id": "4", "pid": 2, "name": "二车队", "orderNum": 2 }
    ];
    
    var tree = arrayToTree(nodes, { 
     "sn" : "orderNum"
    });
    
    console.log(tree);

生成之后是这样:  
![在这里插入图片描述][20210308174116689.png]

[20210308174116689.png]: /images/20221023/3ad9ec64d533481b9779134c74b07da9.png