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 (
                
                    {this.renderTreeNodes(item.children)}
                
            );
        }
        return ;
    })

    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 ? (
                
                    {beforeStr}
                    {searchValue}
                    {afterStr}
        
            ) : {item.title};
            if (item.children) {
                return (
                    
                        {loop(item.children)}
                    
                );
            }
            return ;
        });
        return(
            

                {this.props.button?
                    

                        {this.props.button.includes("add")?添加:""}
                        {this.props.button.includes("update")?修改:""}
                        {this.props.button.includes("delete")?删除:""}

                    
:""

                }
                {this.props.searchable?:""}

                
                    {loop(this.state.treeData)}


                
            
            )


    }
}

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

}

数据类型

{
"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}