ant design react 右键点击菜单实现树tree 增删改查

最新推荐文章于 2023-06-22 15:41:29 发布

喝着绿茶的猫

最新推荐文章于 2023-06-22 15:41:29 发布

阅读量1.2w

点赞数 6

分类专栏： react

本文链接：https://blog.youkuaiyun.com/luyu13141314/article/details/101688549

版权

react 专栏收录该内容

3 篇文章

订阅专栏

使用Ant Design React的右键点击API，结合树结构，实现了右键操作包括增加、删除和修改的功能。点击操作图标后会弹出相应的操作窗口。示例代码展示了关键实现部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：
ant design react 有一个右键点击的APIonRightClick, 所以想自己扩展基于树结构的增删改查功能还是蛮简单的。

我这里实现的是，右键点击会出现操作图标，增加、删除按钮会弹出相应的操作弹窗。

效果展示：
在这里插入图片描述

在这里插入图片描述

部分代码实现：

因为项目里还有设计其他的业务逻辑，这里只展示了核心代码。

html:

    return (
         <Card bordered={false}  onClick={this.clearMenu}>
        <Alert type="info" showIcon message="左键点击组织可查看该组织下的人员，右键点击该组织可以进行添加、修改、删除操作" type="info" />
        <div  className={styles.organizationCard}>
        <div className={styles.leftBox}>
           <Tree
            onSelect={this.onSelect}
            selectedKeys={this.state.selectedKeys}
            onRightClick={this.onRightClick}
            defaultExpandAll
          >
            {this.renderTreeNodes(organizationData)}
          </Tree>
          {this.state.NodeTreeItem != null ? this.getNodeTreeMenu() : ""}
        </div>
      </Card>
      ）

js:

  state = {
    selectedKeys: [],   //选择的树菜单
    NodeTreeItem: null, //右键菜单
    visible: false,     //是否显示modal 新建组织或者修改组织
    current:undefined   //当前需要修改的项
  };

  componentDidMount() {
  // 请求树菜单接口
  }
onSelect = (selectedKeys, info) => {
    const { dispatch } = this.props;
    if(selectedKeys.length === 0){
      selectedKeys.push(info.node.props.dataRef.id+'')
    }
    dispatch({
      type: 'jurisdiction/fetchOrganizationUser',
      payload: {
        id:info.node.props.dataRef.id
      },
    });
    this.setState({selectedKeys})
    console.log(this.state.selectedKeys);

  }
  onRightClick = ({event,node}) => {
    var x = event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
    var y = event.currentTarget.offsetTop ;
    this.setState({
      NodeTreeItem: {
        pageX: x,
        pageY: y,
        id: node.props.eventKey,
        name: node.props.title,
        category: node.props.dataRef.category
      }
    });
  }
    renderTreeNodes = data => data.map((item) => {
    // 这个根据自己返回的接口数据格式来修改
    if (item.subcat) {
      return (
        <TreeNode title={item.name} key={item.id} dataRef={item}>
          {this.renderTreeNodes(item.subcat)}
        </TreeNode>
      );
    }
    return <TreeNode title={item.name} key={item.id} dataRef={item} />
  })

  getNodeTreeMenu() {
    const {pageX, pageY} = {...this.state.NodeTreeItem};
    const tmpStyle = {
      position: 'absolute',
      maxHeight: 40,
      textAlign: 'center',
      left: `${pageX + 10}px`,
      top: `${pageY}px`,
      display: 'flex',
      flexDirection: 'row',
    };
    const menu = (
      <div
        style={tmpStyle}
      >
        <div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleAddSub}>
          <Tooltip placement="bottom" title="添加子组织">
            <Icon type='plus-circle-o' />
          </Tooltip>
        </div>
        <div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleEditSub}>
          <Tooltip placement="bottom" title="修改">
            <Icon type='edit' />
          </Tooltip>
        </div>
        {this.state.NodeTreeItem.category === 1?'':(
          <div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleDeleteSub}>
          <Tooltip placement="bottom" title="删除">
            <Icon type='minus-circle-o' />
          </Tooltip>
        </div>
        )}
      </div>
    );
    return (this.state.NodeTreeItem == null) ? '' : menu;
  }
 clearMenu = () => {
    this.setState({
      NodeTreeItem: null
    })
  }

  handleAddSub = () => {
  // 写自己的业务逻辑
 }
  
  handleEditSub = () => {
   // 写自己的业务逻辑
  }

  handleDeleteSub = () => {
   // 写自己的业务逻辑
  }
  

}