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}