zoukankan      html  css  js  c++  java
  • 将一个数组展为树形结构的数据并将其展示在页面上

    const departments=[
        {
            id:1,
            name:'流程与信息管理中心',
            level:'0.1', 
            parent_id:0,
            seq:1,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:2,
            name:'架构与流程管理部',
            level:'0.1', 
            parent_id:1,
            seq:1,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:3,
            name:'流程管理支持组',
            level:'0.1.2', 
            parent_id:2,
            seq:1,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:4,
            name:'流程管理组',
            level:'0.1.2', 
            parent_id:2,
            seq:2,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:5,
            name:'数据与技术平台部',
            level:'0.1', 
            parent_id:1,
            seq:3,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:6,
            name:'软件开发组',
            level:'0.1.5', 
            parent_id:5,
            seq:1,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:7,
            name:'应用集成组',
            level:'0.1.5', 
            parent_id:5,
            seq:2,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
        {
            id:8,
            name:'数据管理组',
            level:'0.1.5', 
            parent_id:5,
            seq:3,
            mtime:'2019-03-02 16:20:10',
            ctime:'2019-03-02 16:20:10',
            muser_id:12,
            cuser_id:10
        },
    
    ]
    
    constructTree=(arr)=>{
            let result = []
            if(!Array.isArray(arr)) {
                return result
            }
            arr.forEach(item => {
                delete item.children;
            });
            let map = {};
            arr.forEach(item => {
                map[item.id] = item;
            });
            arr.forEach(item => {
                let parent = map[item.parent_id];
                if(parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    result.push(item);
                }
            });
            let theArr=[]; //将对象转为数组,方便后续的操作
            for(let key in map){
                if(map[key].children==undefined||map[key].parent_id!=0){
                    delete map[key];
                }else{
                    theArr.push(map[key]);
                }
            }
            return theArr;
        }
     renderTreeNodes = data =>
            data.map(item => {
            if (item.children) {
                return (
                <TreeNode title={item.name} key={item.id} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
                );
            }
            return  (
                <TreeNode title={item.name} key={item.id} dataRef={item} />
                );
            });
    
    render(){
      const departmentTree=this.constructTree(departments);
    return(
    //ant design的树形控件,详情可以查看ant design官网
        <Tree
                        onExpand={this.onExpand}
                        expandedKeys={this.state.expandedKeys}
                        autoExpandParent={this.state.autoExpandParent}
                        onSelect={this.onSelect}
                        selectedKeys={this.state.selectedKeys}
                        onSelect={this.onSelect}
                    >
                       {this.renderTreeNodes(departmentTree)}
         </Tree>
                    
      )
    }

     最后的效果:

  • 相关阅读:
    Algebra, Topology, Differential Calculus, and Optimization Theory For Computer Science and Machine Learning 第4章 读书笔记(待更新)
    Algebra, Topology, Differential Calculus, and Optimization Theory For Computer Science and Machine Learning 第3章 读书笔记(待更新)
    Algebra, Topology, Differential Calculus, and Optimization Theory For Computer Science and Machine Learning 第1,2章 读书笔记(待更新)
    Tkinter的Message组件
    Git 实操/配置/实践
    mysq5.7.32-win安装步骤
    行为型模式之模板方法
    结构型模式之组合模式
    结构型模式之享元模式
    结构型模式之外观模式
  • 原文地址:https://www.cnblogs.com/LULULI/p/10950521.html
Copyright © 2011-2022 走看看