import React from 'react';
|
import { Row, Col, Tree, Input, Icon, Button } from 'antd';
|
|
const TreeNode = Tree.TreeNode;
|
const Search = Input.Search;
|
|
|
const getParentKey = (title, tree) => {
|
let parentKey;
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i];
|
if (node.children) {
|
if (node.children.some(item => item.title === title)) {
|
parentKey = node.key;
|
} else if (getParentKey(title, node.children)) {
|
parentKey = getParentKey(title, node.children);
|
}
|
}
|
}
|
return parentKey;
|
};
|
|
export default class SearchTree extends React.Component {
|
constructor(props){
|
super(props)
|
this.gData=this.props.data;
|
this.dataList=[]
|
this.state = {
|
expandedKeys: props.expandedKeys,
|
selectedKeys: props.selectedKeys,
|
clickEle:'',
|
searchValue: '',
|
autoExpandParent: true,
|
showSearch: true,
|
checkable: false
|
}
|
}
|
componentDidMount(){
|
const generateList = (data) => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
const key = node.key;
|
const title = node.title;
|
this.dataList.push({ key, title });
|
if (node.children) {
|
generateList(node.children, title);
|
}
|
}
|
};
|
generateList(this.props.data)
|
}
|
|
onExpand = (expandedKeys) => {
|
//this.props.onExpand(expandedKeys)
|
this.setState({
|
expandedKeys,
|
autoExpandParent: false,
|
});
|
}
|
onChange = (e) => {
|
const value = e.target.value;
|
const expandedKeys = this.dataList.map((item) => {
|
if (item.title.indexOf(value) > -1) {
|
return getParentKey(item.title, this.gData);
|
}
|
return null;
|
}).filter((item, i, self) => item && self.indexOf(item) === i);
|
this.setState({
|
expandedKeys,
|
searchValue: value,
|
autoExpandParent: true,
|
});
|
}
|
|
treeSelect=(selectedKeys, e)=>{
|
console.log(selectedKeys)
|
let _this = this;
|
_this.props.onSelect(selectedKeys);
|
if (selectedKeys.length == 0 && typeof this.props.clearKeys!=="undefined") {
|
this.props.clearKeys();
|
}
|
const getOwnNodes = (data) => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key;
|
if (key==selectedKeys) {
|
this.setState({clickEle:node});
|
if(data[i].children){ //如果有子，则返回所有子节点
|
this.props.treeSelect(node.children, [node])
|
}else{ //没有子节点，就返回当前节点
|
this.props.treeSelect([node],[node])
|
}
|
return null;
|
}else{
|
if(data[i].children){
|
getOwnNodes(data[i].children)
|
}
|
}
|
}
|
};
|
getOwnNodes(this.gData)
|
}
|
|
onCheck = ( checkedKeys, {checked: bool, checkedNodes, node, event} ) => {
|
let _this = this;
|
let selectleafNodeKeys = [];
|
for(var i=0;i<checkedNodes.length;i++){
|
if(checkedNodes[i].props.children && checkedNodes[i].props.children.length > 0) {
|
}else{
|
selectleafNodeKeys.push(checkedNodes[i].key)
|
}
|
}
|
console.log('子节点选中的key',selectleafNodeKeys);
|
let treeCheckArr = []; //选中节点的信息
|
const getOwnNodes = (data, checkedKey) => {
|
let _this = this;
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
if (node.key==checkedKey) {
|
if(data[i].children){ //如果有子，也返回当前节点
|
treeCheckArr.push(data[i]);
|
}else{ //没有子节点，就返回当前节点
|
treeCheckArr.push(data[i]);
|
}
|
return null;
|
}else{
|
if(data[i].children){
|
getOwnNodes(data[i].children, checkedKey)
|
}
|
}
|
}
|
};
|
for( var j=0;j<selectleafNodeKeys.length;j++ ) {
|
getOwnNodes(_this.gData,selectleafNodeKeys[j]);
|
_this.props.currentTreeCheck(treeCheckArr);
|
}
|
_this.props.onCheck(checkedKeys);
|
}
|
|
add=()=>{
|
this.props.add()
|
}
|
|
delete=()=>{
|
this.props.delete(this.state.clickEle)
|
}
|
render() {
|
const { searchValue, expandedKeys, autoExpandParent, selectedKeys } = this.state;
|
const showSearch = typeof this.props.showSearch==="undefined" ? this.state.showSearch : this.props.showSearch;
|
const checkable = typeof this.props.checkable==="undefined" ? this.state.checkable : this.props.checkable;
|
|
const loop = data => data.map((item) => {
|
const disabled = item.disabled || false;
|
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: '#f50' }}>{searchValue}</span>
|
{afterStr}
|
</span>
|
) : <span>{item.title}</span>;
|
if (item.children) {
|
return (
|
<TreeNode key={item.key} title={title} disabled={disabled}>
|
{loop(item.children)}
|
</TreeNode>
|
);
|
}
|
return <TreeNode key={item.key} title={title} disabled={disabled}/>;
|
});
|
|
return (
|
|
<div>
|
|
<div style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
|
{ showSearch && <Search style={{ marginBottom: 1 }} placeholder="搜索资源名称" onChange={this.onChange} />}
|
{ this.props.addShow && <Button onClick={this.add} style={{ display:'inline-block',margin:'5px'}}><Icon type="plus-circle-o" style={{ fontSize: 16 ,display:'inline-block'}}/></Button>}
|
{ this.props.delShow && <Button onClick={this.delete} style={{ display:'inline-block',margin:'5px'}}><Icon type="delete" style={{ fontSize: 16,display:'inline-block'}}/></Button>}
|
</div>
|
{
|
this.gData.length>0&&
|
// style={{height: 413, overflowY: 'auto'}}
|
<div>
|
<Tree
|
defaultExpandAll={false}
|
onSelect={this.treeSelect}
|
// onExpand={this.onExpand}
|
// expandedKeys={expandedKeys}
|
autoExpandParent={autoExpandParent}
|
showLine
|
checkable={checkable}
|
onCheck={this.onCheck}
|
checkedKeys={this.props.checkedKeys}
|
selectedKeys={this.props.selectedKeys}
|
>
|
{loop(this.gData)}
|
</Tree>
|
</div>
|
}
|
</div>
|
);
|
}
|
}
|
