antd树型选择控件选择父级_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?:""}

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)}

)

}

}

调用

const treeOption = {

treeurl:React.rootDirectoryUrl+"/department/getDepartmentTree",//地址

selectMethod:this.onSelect, //选择方法

checkMethod:this.onCheck ,//chect方法

button:["add","update","delete"],//显示哪些按钮

checkable:true,//可check

searchable:true,//可搜索

}

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