antd 樹形組件經常使用工具

treeUtil.js

import {Tree,message,Button,Input } from 'antd';
import React from 'react'
import axios from 'axios'
const { TreeNode } = Tree;
const Search = Input.Search;


const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some(item => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};
const dataList = [];
const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        dataList.push({ key, title: node.title });
        if (node.children) {
            generateList(node.children);
        }
    }
};
export default class treeUtil extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            treeData:[]
        };

    }
    componentWillMount (){
        this.getTree();
    }
    getTree(){
        axios.get(this.props.treeurl).then(res =>{
            generateList(res.data.data)
            this.setState({
                treeData:res.data.data,
                haveTreeData:true,
                expandedKeys: [],
                searchValue: '',
                autoExpandParent: true,
            })

        })
    }
    onExpand = (expandedKeys) => {
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    }
    onSelect = (selectedKeys) => {
        console.log(this.props)

        // this.formRef.setState({
        //     disabled:true
        // })
        this.setState({ selectedKeys});
        if(selectedKeys.length>0 && this.props.selectMethod){
           this.props.selectMethod(selectedKeys)
        }
    }

    onChange = (e) => {
        const value = e.target.value;
        const newExpandedKeys = []
        let expandedKeys = dataList.map((item) => {

            if (item.title.indexOf(value) > -1) {

                return getParentKey(item.key, this.state.treeData);
            }
            return null;
        }).filter((item, i, self) => item && self.indexOf(item) === i);

        expandedKeys.forEach(x=>{
            newExpandedKeys.push(x.toString())
        })
        this.setState({
            expandedKeys:newExpandedKeys,
            searchValue: value,
            autoExpandParent: true,
        });

    }
    onCheck = (checkedKeys) => {
        console.log('onCheck', checkedKeys);
        if(checkedKeys.length>0 && this.props.checkMethod){
            this.props.checkMethod(checkedKeys)
        }
        this.setState({ checkedKeys });
    }


    renderTreeNodes = data => data.map((item) => {

        if (item.children) {
            return (
                <TreeNode title={item.title}  key={item.key} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })

    addTree(){
        // //解除禁用
        // this.formRef.setState({
        //     disabled:false
        // })
        let selectedKey = null;
        if(this.state.selectedKeys){
            selectedKey= this.state.selectedKeys[0]
        }else {
            selectedKey = null;
        }

    }
    change(){
        // this.formRef.setState({
        //     disabled:false
        // })
    }
    delete(){
        axios.get(this.props.deleteUrl+this.state.selectedKeys[0] ).then(res =>{

            if(res.data.success){
                message.success(res.message);
                this.getTree()
                this.formRef.props.form.resetFields();
            }else{
                message.warning("系統異常");
            }


        })
    }
    render(){
        const { searchValue, expandedKeys, autoExpandParent } = this.state;
        const loop = data => data.map((item) => {
            const index = item.title.indexOf(searchValue);
            const beforeStr = item.title.substr(0, index);
            const afterStr = item.title.substr(index + searchValue.length);
            const title = index > -1 ? (
                <span>
                    {beforeStr}
                    <span style={{ color: 'blue' }}>{searchValue}</span>
                    {afterStr}
        </span>
            ) : <span>{item.title}</span>;
            if (item.children) {
                return (
                    <TreeNode key={item.key} title={title}>
                        {loop(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} title={title} />;
        });
        return(
            <div>
                {this.props.button?
                    <div className="btn-group">
                        {this.props.button.includes("add")?<Button type="primary" onClick={this.addTree.bind(this)}>添加</Button>:""}
                        {this.props.button.includes("update")?<Button type="primary" onClick={this.change.bind(this)}>修改</Button>:""}
                        {this.props.button.includes("delete")?<Button type="primary" onClick={this.delete.bind(this)}>刪除</Button>:""}

                    </div>:""

                }
                {this.props.searchable?<Search style={{ marginBottom: 8 }} placeholder="搜索" onChange={this.onChange} />:""}

                <Tree
                    onExpand={this.onExpand}
                    expandedKeys={this.state.expandedKeys}
                    autoExpandParent={this.state.autoExpandParent}
                    onSelect={this.onSelect}
                    selectedKeys={this.state.selectedKeys}
                    checkable = {this.props.checkable}
                >
                    {loop(this.state.treeData)}


                </Tree>
            </div>
            )


    }
}

調用
 const treeOption = {
    treeurl:React.rootDirectoryUrl+"/department/getDepartmentTree",//地址
    selectMethod:this.onSelect, //選擇方法
    checkMethod:this.onCheck ,//chect方法
    button:["add","update","delete"],//顯示哪些按鈕
    checkable:true,//可check
    searchable:true,//可搜索

}


<TreeUtil
    {...treeOption}
/>

數據類型

{
"code":"200",
"message":"獲取成功",
"data":[
    {
     "key":45,
     "title":"公司",
     "pid":null,
     "children":[
         {
             "key":46,
             "title":"研發部",
             "pid":45,
             "children":[
                 {
                     "key":48,
                     "title":"產品1",
                     "pid":46,
                     "children":[]
                 },{
                     "key":49,
                     "title":"產品2",
                     "pid":46,
                     "children":[]
                     }
              ]
         },{
             "key":50,
             "title":"財務部",
             "pid":45,
             "children":[
                 {
                     "key":52,
                     "title":"會計",
                     "pid":50,
                     "children":[]
                 }
                 
             ]
          }
     ]
  },{
       "key":53,
       "title":"外包",
       "pid":null,
       "children":[
           {"key":54,"title":"科技部","pid":53,"children":[]}
       ]
     }
     ],"success":true}