The exhibition is an array of data in a tree structure and displayed on the page

Departments = const [ 
    { 
        ID: . 1 , 
        name: 'process and the information management center' , 
        Level: '0.1' , 
        the parent_id: 0 , 
        SEQ: . 1 , 
        the mtime: '2019-03-02 16:20:10' , 
        the ctime: '2019-03-02 16:20:10' , 
        muser_id: 12 is , 
        cuser_id: 10 
    }, 
    { 
        ID: 2 , 
        name: 'architecture and process management unit' , 
        Level: '0.1' ,
        the parent_id: '2019-03-02 16:20:10 ' ,. 1 , 
        SEQ: . 1 , 
        the mtime: '2019-03-02 16:20:10' , 
        the ctime: '2019-03-02 16:20:10' , 
        muser_id: 12 is , 
        cuser_id: 10 
    }, 
    { 
        ID: . 3 , 
        name: 'process management support group' , 
        Level: '0.1.2' , 
        the parent_id: 2 , 
        SEQ: . 1 , 
        the mtime: '2019-03-02 16:20:10' , 
        the ctime: 
        muser_id: 12 is , 
        cuser_id: 10 
    }, 
    { 
        ID: . 4 , 
        name: 'process management group' , 
        Level: '0.1.2' , 
        the parent_id: 2 , 
        SEQ: 2 , 
        the mtime: '2019-03-02 16:20: 10 ' , 
        the ctime: "2019-03-02 16:20:10" , 
        muser_id: 12 is , 
        cuser_id: 10 
    }, 
    { 
        ID: . 5 , 
        name: ' data technology platform portion ' ,
        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: 'application integration group' , 
        Level: '0.1.5' , 
        the parent_id: . 5 , 
        SEQ: 2 , 
        the mtime: '2019-03-02 16:20:10' , 
        the ctime: ' 16:20:10 2019-03-02 ' , 
        muser_id: 12 is , 
        cuser_id: 10 
    }, 
    { 
        ID: 8, 
        name: ' data management group ' , 
        Level: ' 0.1.5 ' , 
        the 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 => { 
            the let parent = Map [item.parent_id];
             IF (parent) { 
                (parent.children || (parent.children = [])) .push (Item); 
            } the else { 
                result.push (Item); 
            }
        });
        let theArr= []; // object into an array, to facilitate the subsequent operations 
        for (the let Key in Map) {
             IF (Map [Key] == undefined || .children Map [Key] .parent_id = 0! ) {
                 Delete Map [Key]; 
            } the 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 tree control, ant design details can see the official website 
    < Tree 
                    onExpand = { the this .onExpand} 
                    expandedKeys = { the this .state.expandedKeys} 
                    autoExpandParent = { the this .state.autoExpandParent} 
                    the onSelect = { the this .onSelect } 
                    the selectedKeys = { the this .state.selectedKeys} 
                    the onSelect = { the this .onSelect}
                 > 
                   { the this.renderTreeNodes(departmentTree)}
     </Tree>
                
  )
}

 The final results:

Guess you like

Origin www.cnblogs.com/LULULI/p/10950521.html