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}