基于antd Tree实现可编辑菜单树,支持节点新增、删除、修改、拖拽

6 篇文章 0 订阅
3 篇文章 0 订阅

1. 功能说明

基于antd Tree,实现了可编辑菜单树,支持以下功能:

  1. 树节点 新增、删除、修改(input输入)
  2. 树节点 拖拽调整顺序

2. 效果

在这里插入图片描述

3. 完整代码

import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, Input, Select, Checkbox, Divider, Tree, Message } from 'antd';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';

const { TreeNode } = Tree;
var tempKey = '1000';

const App = (props) => {
  const { onHandleCancel = () => {}, onHandleOk = () => {}, data = {} } = props;

  var treeDataTemp = [
    {
      title: '0-0',
      key: '0-0',
      children: [
        {
          title: '0-0-0',
          key: '0-0-0',
          children: [
            {
              title: '0-0-0-0',
              key: '0-0-0-0'
            },
            {
              title: '0-0-0-1',
              key: '0-0-0-1'
            }
          ]
        },
        {
          title: '0-0-2',
          key: '0-0-2'
        }
      ]
    },
    {
      title: '0-2',
      key: '0-2'
    }
  ];
  const [treeData, setTreeData] = useState(treeDataTemp);

  const onDragEnter = (info) => {
    console.log(info);
  };

  const onDrop = (info) => {
    console.log(info);
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

    const loop = (data, key, callback) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          return callback(data[i], i, data);
        }
        if (data[i].children) {
          loop(data[i].children, key, callback);
        }
      }
    };
    const data = [...treeData];

    // Find dragObject
    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });

    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部,可以是随意位置
        item.children.unshift(dragObj);
      });
    } else if (
      (info.node.props.children || []).length > 0 && // Has children
      info.node.props.expanded && // Is expanded
      dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到头部,可以是随意位置
        item.children.unshift(dragObj);
        // in previous version, we use item.children.push(dragObj) to insert the
        // item to the tail of the children
      });
    } else {
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    }

    setTreeData([...data]);

    console.log('data2', data);
  };

  const onAdd = (key) => {
    console.log('onAdd', key);
    var treeDataOld = JSON.parse(JSON.stringify(treeData));
    var treeDataNew = addNode(key, treeDataOld);
    setTreeData(treeDataNew);

    tempKey++;
    function addNode(key, data) {
      data.forEach((item) => {
        if (item.key === key) {
          item.children
            ? item.children.push({
                title: `默认值${tempKey}`,
                key: `${tempKey}`
              })
            : (item.children = [
                {
                  title: `默认值${tempKey}`,
                  key: `${tempKey}`
                }
              ]);
        } else {
          if (item.children) {
            addNode(key, item.children);
          }
        }
      });
      return data;
    }
  };

  const onDelete = (key) => {
    console.log('onAdd', key);
    var treeDataOld = JSON.parse(JSON.stringify(treeData));
    var treeDataNew = deleteNode(key, treeDataOld);
    setTreeData(treeDataNew);

    function deleteNode(key, arr) {
      arr.map((item, index) => {
        if (item.key == key) {
          arr.splice(index, 1);
        }
        if (item.children) {
          deleteNode(key, item.children);
        }
      });
      return arr;
    }
  };

  const onChange = (e, key) => {
    console.log('onChange', e, key);
    var treeDataOld = JSON.parse(JSON.stringify(treeData));
    var treeDataNew = editNode(key, treeDataOld, e.target.value);
    setTreeData(treeDataNew);

    function editNode(key, data, val) {
      data.forEach((item) => {
        if (item.key === key) {
          item.title = val;
        } else {
          if (item.children) {
            editNode(key, item.children, val);
          }
        }
      });
      return data;
    }
  };

  const renderTreeNodes = (data) => {
    console.log('renderTreeNodes', data);
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item}></TreeNode>;
    });
  };

  const onTitleRender = (item) => {
    return (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Input
          // value={item.title}
          defaultValue={item.title}
          onChange={(e) => onChange(e, item.key)}
        />
        <span style={{ display: 'flex' }}>
          <PlusOutlined style={{ marginLeft: 10 }} onClick={() => onAdd(item.key)} />
          <CloseOutlined style={{ marginLeft: 10 }} onClick={() => onDelete(item.key)} />
        </span>
      </div>
    );
  };

  return (
    <>
      <Modal
        title={data?.header}
        visible={true}
        onOk={() => handleOk()}
        onCancel={() => onHandleCancel(false)}
        okText="确认"
        cancelText="取消"
        maskClosable={false}
      >
        <Tree
          className="draggable-tree"
          defaultExpandAll={true}
          draggable
          onDragEnter={onDragEnter}
          onDrop={onDrop}
          titleRender={onTitleRender}
        >
          {treeData?.length && renderTreeNodes(treeData)}
        </Tree>
      </Modal>
    </>
  );
};

export default App;


  • 7
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Ant Design Tree 组件提供了一个 `treeData` 属性,通过这个属性可以渲染出一棵形结构。要实现编辑菜单,需要在这个属性的基础上进行一些扩展。 首先,需要为每个节点添加一个可编辑的标识,用来表示该节点是否可以编辑。可以在 `treeData` 中为每个节点添加一个 `editable` 属性。 其次,当用户点击一个节点时,需要判断该节点是否可编辑,如果可编辑,则将该节点的文本内容转换成一个可编辑的文本框,让用户进行编辑。 最后,当用户完成编辑后,需要将编辑后的值保存到该节点中,并且将文本框转换回文本内容。 下面是一个简单的示例代码: ```jsx import { Tree, Input } from 'antd'; import { useState } from 'react'; const { TreeNode } = Tree; const treeData = [ { title: 'Node 1', key: '1', editable: true, children: [ { title: 'Child Node 1', key: '1-1', editable: true, }, { title: 'Child Node 2', key: '1-2', editable: true, }, ], }, { title: 'Node 2', key: '2', editable: true, }, ]; const EditableTree = () => { const [editingKey, setEditingKey] = useState(''); const onDoubleClick = (event, node) => { if (node.editable) { setEditingKey(node.key); } }; const onBlur = (event, node) => { setEditingKey(''); node.title = event.target.value; }; const renderTreeNode = (node) => { const { title, key, editable, children } = node; if (editingKey === key) { return ( <TreeNode title={<Input defaultValue={title} onBlur={(event) => onBlur(event, node)} />} key={key} /> ); } return ( <TreeNode title={title} key={key} editable={editable}> {children && children.map(renderTreeNode)} </TreeNode> ); }; return ( <Tree showLine defaultExpandAll onDoubleClick={onDoubleClick}> {treeData.map(renderTreeNode)} </Tree> ); }; export default EditableTree; ``` 这段代码中,我们使用了 Ant Design 的 `Tree` 和 `Input` 组件,使用 `useState` 钩子保存了当前正在编辑节点的 `key` 值。在双击事件中,如果该节点编辑,则将该节点的 `key` 值保存到 `editingKey` 中,这样就可以将该节点的文本内容转换成一个可编辑的文本框。在失去焦点事件中,将编辑后的值保存到该节点中,并将文本框转换回文本内容。最后,通过递归渲染节点实现了可编辑菜单

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值