echartstree【树形列表，右键出现菜单】
【转】：
1，列表上右键事件  treeNodeonRightClick，代码中有
2，⾃定义右键菜单内容 getNodeTreeRightClickMenu，代码中有
3，return下⾯写⼊右键菜单内容 {NodeTreeRightClickMenu()}
4，效果图
5，详细代码
import React, { PureComponent } from'react';
import { findDOMNode } from'react-dom';
import moment from'moment';
import { Link } from'react-router-dom';
import { connect } from'dva';
import { Row, Col, Table, Radio, Input, Form, Button, Icon, DatePicker, Select, Modal, Popconfirm, Badge, Dropdown, Tree, Menu, Popover, } from'antd'; import styles from'./departmentList.less';
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const SelectOption = Select.Option;
const { Search, TextArea } = Input;
const { TreeNode } = Tree;
const treeData = [{}];
@ate()
class DepartmentList extends PureComponent {
state = {
expandedKeys: ['1', '2', '4'],
autoExpandParent: true,
checkedKeys: [],
selectedKeys: [],
value2: 'Apple',
treeData: [],
department_id: '',
rightClickNodeTreeItem: {
pageX: '',
pageY: '',
id: '',
categoryName: '',
},
display: 'block',
};
componentDidMount() {
const departmentsListTree = this.props.departmentList;
this.setState({
treeData: departmentsListTree,
});
}react router的state和search
// 展开
onExpand = (expandedKeys, expanded, record) => {
// console.log('onExpand', expandedKeys);
this.setState({
expandedKeys,
autoExpandParent: false,
});
};
// 选择节点
onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
const departmentId = info.selectedNodes[0].props.dataRef.id;
// console.log('departmentId', departmentId);
const { dispatch } = this.props;
dispatch({ type: 'department/userRole', payload: { department_id: departmentId } });
// console.log('id',info.selectedNodes[0].props.dataRef.id);
};
// 读取⼦节点
renderTreeNodes = data =>
data.map(item => {
if (item.children) {
return (
<TreeNode title={item.name} key={item.id}  dataRef={item} data-key={item.id}  data-title={item.categoryName} >            {derTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} dataRef={item} />;
});
// tree列表上右键事件
treeNodeonRightClick = e => {
this.setState({
display: 'block',
rightClickNodeTreeItem: {
pageX: e.event.pageX,
pageY: e.event.pageY,
id: e.node.props['data-key'],
categoryName: e.node.props['data-title'],
},
});
// console.log("id::",e.node.props["title"])
};
// 点击取消隐藏
hideRight = e => {
this.setState({
display: 'none',
});
console.log(this.state);
};
// ⾃定义右键菜单内容
getNodeTreeRightClickMenu = () => {
// alert(33)
const { pageX, pageY, id } = { ...this.state.rightClickNodeTreeItem };
// console.log("右键菜单id:",id);
const tmpStyle = {
position: 'absolute',
left: `${pageX + 40}px`,
top: `${pageY - 12}px`,
display: this.state.display,
};
const menu = (
<div style={tmpStyle} className={styles.selfrightmenu} onMouseLeave={this.hideRight}>
<Link to={{ pathname: '/SetUp/department/edit', query: { id: id } }}>
<a>编辑</a>
</Link>
<Popconfirm title="确定删除此记录?" onConfirm={() => this.deleteDepartment(id)}>
<a href="javascript:;"><a>删除</a></a>
</Popconfirm>
<Link to={{ pathname: '/SetUp/userSet/edit', query: { department_id: id } }}>
<a href="javascript:;">添加⽤户</a>
</Link>
<Link to={{ pathname: '/SetUp/department/edit', query: { parent_id: id } }}>
<a style={{ borderBottom: '1px solid gainsboro', paddingBottom: '10px', display: ' block', }}>添加部门</a>
</Link>
<Button onClick={this.hideRight} style={{ marginLeft: '15px', marginTop: '10px' }}>取消</Button>
</div>
);
return this.state.rightClickNodeTreeItem == null ? '' : menu;
};
render() {
const formItemLayout = {
labelCol: {
xs: { span: 20 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 20 },
sm: { span: 12 },
},
};
const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form; const modalVisible = dalVisible;
const { dispatch } = this.props;
const departmentsListTree = this.props.departmentList;
const { checkedKeys, selectedValue, treeData, checkNodes, expandedKeys } = this.state; return (
<div className={styles.listback}>
<div style={{ width: '35%', float: 'left' }}>
<h3>部门树</h3>
<Tree
showLine
expandedKeys={pandedKeys}
onSelect={Select}
onExpand={Expand}
onRightClick={NodeonRightClick}
>
{derTreeNodes(departmentsListTree)}
</Tree>
{NodeTreeRightClickMenu()}
</div>
</div>
);
}
}
function mapStateToProps(state) {
return { ...state.department };
}
export default connect(mapStateToProps)(DepartmentList);