基于antd实现动态修改节点的Tree组件

已于 2024-04-26 14:50:49 修改
阅读量2k 收藏 7
点赞数 3
文章标签： javascript react.js 前端
于 2023-10-17 19:40:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/study_way/article/details/133876858
版权
文章讲述了如何在基于React和AntDesign的项目中，利用Tree组件实现动态添加和删除节点，以及自定义节点时的输入验证和下拉菜单功能。作者详细介绍了DropdownInput组件的创建和使用，以及编辑节点和删除节点的处理逻辑。
摘要由CSDN通过智能技术生成

前言

之前遇到一个需求，可对于任意节点添加或删除子节点。首先技术栈是基于react+ant design，ant提供了Tree组件，但都是根据固定的数据渲染出树结构，如果需要新增或删除节点，官网并未提供。

实现过程

新增节点

首先，要记录选中节点，在有选中的情况下点击全局的新增按钮，就相当于在选中的节点下新增子节点，否则直接在最外层节点添加新的节点（此时的情况就是有多个并列的根节点）。当然也可以直接点击节点出现下拉菜单，选择操作
在这里插入图片描述

然后，实现新增功能，在点击新增按钮之后，相应的节点位置出现输入框，按回车或者输入框失去焦点代表输入完成。找到插入位置，将新增的节点插入。

输入状态：
在这里插入图片描述
输入完成后：
在这里插入图片描述
需要自定义节点，点击节点（ant Dropdown组件也支持右键）显示下拉弹窗。
这里的DropdownInput是自定义的组件，因为需要校验输入内容

// DropdownInput组件
import { Dropdown, Input } from "antd";
import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import type { InputProps } from "antd";
import _ from "lodash";

interface DropdownInputType extends InputProps {
  errorInfo?: string;
  initValue?: string;
}

const DropdownInputFun: React.ForwardRefRenderFunction<
  unknown,
  DropdownInputType
> = (props, ref) => {
  const { errorInfo, initValue, onChange, onBlur, onPressEnter } = props;
  const [open, setOpen] = useState<boolean>(false);
  const [errorText, setErrorText] = useState<string>("请输入中英文数字及下划线");
  const [value, setValue] = useState<string>(""); // 值

  const inputRef = useRef<any>(null);

  useImperativeHandle(ref, () => inputRef?.current);

  useEffect(() => {
    if (initValue) setValue(initValue);
  }, [initValue]);

  useEffect(() => {
    if (errorInfo) setErrorText(errorInfo);
  }, [errorInfo]);

  /** 监听输入报错 */
  const handleChange = _.debounce((e: any, isSure = false) => {
    const { value } = e?.target;
    const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
    if (!reg.test(value)) {
      setOpen(true);
    } else {
      setOpen(false);
      onChange?.(value);
    }
  }, 300);

  return (
    <Dropdown
      overlay={
        <div
          style={{
            background: "#fff",
            padding: "8px 12px",
            height: 20,
            boxShadow: "0px 2px 12px 0px rgba(0,0,0,0.06)",
          }}
        >
          {errorText}
        </div>
      }
      open={open}
    >
      <Input
        ref={inputRef}
        value={value}
        onChange={(e) => {
          e?.persist();
          setValue(e?.target?.value);
          handleChange(e);
        }}
        onBlur={(e) => {
          !open && onBlur?.(e);
        }}
        onPressEnter={(e: any) => {
          !open && onPressEnter?.(e);
        }}
        style={{ width: 272, borderColor: open ? "red" : "" }}
      />
    </Dropdown>
  );
};
const DropdownInput = forwardRef(DropdownInputFun);
export default DropdownInput;



 // 自定义节点
  const titleRender = (node: any) => {
    const { title, icon, key, isInput } = node;
    const paddingLeft = 16 * (node.level - 1);
    if (isInput)
      return (
        <DropdownInput
          ref={refInput}
          initValue={title}
          onPressEnter={(e) => onEnter(e, node)}
          onBlur={(e) => onEnter(e, node)}
        />
      );
    return (
      <Dropdown overlay={() =>  (
        <Menu
          onClick={(e) => {
            if (e?.key === "add") addItem(node);
            if (e?.key === "edit") editItem(node);
            if (e?.key === "del") {
              const data = mergeChildrenToParent1(treeData, node?.key);
              setTreeData(data); // 更新树 数据
            }
          }}
        >
          <Menu.Item key="del">刪除</Menu.Item>
          <Menu.Item key="add">新增</Menu.Item>
          <Menu.Item key="edit">编辑</Menu.Item>
        </Menu>
      )} 
      trigger={["click"]}>
        <div
          key={key}
          style={{ paddingLeft, display: "flex" }}
          className="titleRoot"
        >
          {icon}&nbsp;&nbsp;
          <div>{title}</div>
        </div>
      </Dropdown>
    );
  };

添加节点的addItem函数

// 添加节点
  const addItem = (node: any) => {
    const len = _.isEmpty(node?.children) ? 0 : node?.children?.length;
    // 插入节点isInput为true，渲染节点的判断条件
    const newChild = _.isEmpty(node.children)
      ? [{ isInput: true, key: `${node?.key}-${len}` }]
      : [
          {
            isInput: true,
            key: `${node?.key}-${len}`,
          },
          ...node.children,
        ];
    const data = updateTreeData(treeData, node, newChild);
    setTreeData(data);
    const expands = expandedKeys?.includes(node?.key)
      ? expandedKeys
      : [node?.key, ...expandedKeys];
    setExpandedKeys(expands);
    setIsAdd(true);
  };

const updateTreeData = (tree: any, target: any, children: any) => {
  return tree.map((node: any) => {
    if (node.key === target.key) {
      return { ...node, children };
    } else if (node?.children) {
      return {
        ...node,
        children: updateTreeData(node?.children, target, children),
      };
    }
    return node;
  });
};

输入完成后的onEnter函数

// 监听添加节点的输入
  const onEnter = (e: any, node: any) => {
    const value = e?.target?.value;

    setIsAdd(false);
    if (!value) {
    // 输入内容为空就回车，直接删除编辑框的节点
      const dele = deleteNodeByKey(treeData, node?.key);
      setTreeData(dele);
      return;
    }
    // 有输入内容就跟新
    const data = updateItem(treeData, node?.key, value);
    setTreeData(data);
  };

// deleteNodeByKey
// 根据key 找到要删除的节点
const deleteNodeByKey: any = (treeData: any, keyToDelete: string) => {
  return _.map(treeData, (node) => {
    if (node.key === keyToDelete) {
      // 如果节点的key匹配要删除的key，则返回undefined，表示不包括该节点
      return undefined;
    } else if (node.children) {
      // 如果节点有子节点，则递归处理子节点
      return {
        ...node,
        children: deleteNodeByKey(node.children, keyToDelete),
      };
    }
    return node; // 其他情况下返回原始节点
  }).filter(Boolean); // 过滤掉undefined的节点
};

// updateItem 
// 根据key 找到正在输入的节点，将输入内容跟新到title（显示节点的名字），并删除之前的isInput属性
const updateItem: any = (tree: any, key: string, data: any) => {
  return _.map(tree, (item: any) => {
    if (item?.key === key) {
      item.title = data;
      return _.omit(item, "isInput");
    } else if (item?.children) {
      return { ...item, children: updateItem(item?.children, key, data) };
    }
    return item;
  });
};

这样一个新增节点的功能就完成了。

编辑节点

有了上面的新增功能，编辑就简单多啦，在将节点替换成编辑框时，只需要带上节点的title为输入框的默认值
在这里插入图片描述

 const editItem = (node: any) => {
    const data = editTreeItem(treeData, node?.key);
    setTreeData(data);
    setIsAdd(true);
  };

// 节点呈编辑状态
export const editTreeItem: any = (tree: any, key: string) => {
  return _.map(tree, (item: any) => {
    if (item?.key === key) {
      item.isInput = true;
      console.log("进来啦",item);
      
      return item;
    } else if (item?.children) {
      return { ...item, children: editTreeItem(item?.children, key) };
    }
    return item;
  });
};

后面的逻辑就和新增一样啦，监听输入框的回车和失焦事件，完成编辑功能。

删除节点

删除节点要考虑是否删除节点下的子节点，如果直接删除子节点，逻辑就简单了，如果需要把删除节点的子节点给删除节点父节点，需要额外处理

// 直接删除
const deleteNodeByKey: any = (treeData: any, keyToDelete: string) => {
  return _.map(treeData, (node) => {
    if (node.key === keyToDelete) {
      // 如果节点的key匹配要删除的key，则返回undefined，表示不包括该节点
      return undefined;
    } else if (node.children) {
      // 如果节点有子节点，则递归处理子节点
      return {
        ...node,
        children: deleteNodeByKey(node.children, keyToDelete),
      };
    }
    return node; // 其他情况下返回原始节点
  }).filter(Boolean); // 过滤掉undefined的节点
};

// 删除节点，子节点合并到上级
const mergeChildrenToParent: any = (
  treeData: any,
  keyToDelete: string
) => {
  return _.flatMap(treeData, (node) => {
    if (node.key === keyToDelete) {
      // 如果节点的key匹配要删除的key
      if (node.children) {
        // 如果有子节点，将子节点合并到当前节点的父节点中
        const parent = _.find(treeData, (parentNode) => {
          return _.some(parentNode.children, { key: keyToDelete });
        });

        if (parent) {
          parent.children = [
            ...(parent.children || []),
            ...(node.children || []),
          ];
        }
        return undefined; // 返回undefined，表示删除当前节点
      } else {
        return undefined; // 如果没有子节点，直接删除当前节点
      }
    } else if (node.children) {
      // 如果节点有子节点，则递归处理子节点
      return {
        ...node,
        children: mergeChildrenToParent(node.children, keyToDelete),
      };
    }
    return node; // 其他情况下返回原始节点
  }).filter(Boolean); // 过滤掉undefined的节点
};

附上Tree组件。里面的函数，上面都有，就不一一写完成了

import React, { useEffect, useRef, useState } from "react";
import { Button, Dropdown, Menu, Tree } from "antd";
import { DownOutlined } from "@ant-design/icons";
import DropdownInput from "@/components/DropdownInput";

const DemoTree = () => {
  const [visible, setVisible] = useState<boolean>(false);
  const [treeData, setTreeData] = useState([
    {
      title: "根节点1",
      key: "1-0",
      children: [
        {
          title: "子节点1",
          key: "1-0-0",
        },
        {
          title: "子节点2",
          key: "1-0-1",
        },
        {
          title: "子节点3",
          key: "1-0-2",
        },
      ],
    },
    {
      title: "根节点2",
      key: "2-1",
      children: [
        {
          title: "子节点4",
          key: "2-1-0",
        },
        {
          title: "子节点5",
          key: "2-1-1",
        },
      ],
    },
    {
      title: "根节点3",
      key: "3-1",
      children: [
        {
          title: "子节点6",
          key: "3-1-0",
          children:[{
            title:'jjj',
            key:'dfv'
          }]
        },
        {
          title: "子节点7",
          key: "3-1-1",
        },
      ],
    },
  ]);
  const refInput = useRef<any>(null);
  const [expandedKeys, setExpandedKeys] = useState<any[]>([]);

  const editItem = (node: any) => {};

  // 添加节点
  const addItem = (node: any) => {};

  // 监听添加节点的输入
  const onEnter = (e: any, node: any) => {};

  // 自定义节点
  const titleRender = (node: any) => {
    const { title, icon, key, isInput } = node;
    const paddingLeft = 16 * (node.level - 1);
    if (isInput)
      return (
        <DropdownInput
          ref={refInput}
          initValue={title}
          onPressEnter={(e) => onEnter(e, node)}
          onBlur={(e) => onEnter(e, node)}
        />
      );
    return (
      <Dropdown overlay={() =>(
        <Menu
          onClick={(e) => {
            if (e?.key === "add") addItem(node);
            if (e?.key === "edit") editItem(node);
            if (e?.key === "del") {
            // 这里用的方法上面都有哦。这里没引入
              const data = mergeChildrenToParent(treeData, node?.key);
              setTreeData(data);
            }
          }}
        >
          <Menu.Item key="del">刪除</Menu.Item>
          <Menu.Item key="add">新增</Menu.Item>
          <Menu.Item key="edit">编辑</Menu.Item>
        </Menu>
      )} trigger={["click"]}>
        <div
          key={key}
          style={{ paddingLeft, display: "flex" }}
          className="titleRoot"
        >
          {icon}&nbsp;&nbsp;
          <div>{title}</div>
        </div>
      </Dropdown>
    );
  };

  return (
    <div>
      <Tree
        treeData={treeData}
        expandedKeys={expandedKeys}
        switcherIcon={<DownOutlined />}
        titleRender={titleRender}
        onExpand={(keys: any[]) => setExpandedKeys(keys)}
      />
    </div>
  );
};
export default DemoTree;

本文仅供参考，个人观点。

heiyay
关注
antd tree树动态插入
qq_42551474的博客
03-19 2455
antd虽然给我们很大的方便，但是很多时候，自定义的样式还是不好弄的，当我们需要改动antd tree树的时候可以使用插槽的方式。 上代码了。。。。 <a-tree //加了树自动展开 v-if="treeData.length>0" :defaultExpandAll="true" ...
antd tree 动态添加_Vue高性能渲染大数据Tree组件「实践」
weixin_39907131的博客
11-19 1876
作者：jayzou转发连接：https://segmentfault.com/a/1190000021228976背景项目中需要渲染一个5000+节点的树组件，但是在引入element Tree组件之后发现性能非常差，无论是滚动、展开/收起节点还是点击节点卡顿都非常明显，利用performance跑一下性能数据发现到问题所在从上图可以看到，除去Idle之外，总共花费的时间为12s，其中Script...
AntD-tree组件使用详析
qq_45799465的博客
02-17 8152
一、selectedKeys与onSelect。 二、expandedKeys与onExpand。 三、loadedKeys与onLoad和onExpand。 四、loadData。 五、树节点局部节点刷新。 六、递归获取与修改数据
react antd TreeSelect实现自定义标签
最新发布
Q_004的博客
08-20 421
tagRender：显示的是单个tag的数据。selectObj的值是：（单个选项）
基于antd Tree实现可编辑菜单树，支持节点新增、删除、修改、拖拽
ElvisSu的专栏
05-11 5555
基于antd Tree实现可编辑菜单树，支持节点新增、删除、修改、拖拽
React + antd 树Tree实现树节点的增删改（自定义树节点插槽）
weixin_58031521的博客
06-22 2882
示例： 实现鼠标悬浮展示按钮元素原理：:hover结合display: none。默认为display: none，:hover时修改display的值即可。
react antd可编辑树
坚强的泡沫的博客
01-13 528
react antd可编辑树
Ant-design-vue 树形控件tree 新增节点，删除节点，编辑节点的解决方案
热门推荐
仇益阳的博客
06-26 3万+
Ant-design-vue 树形控件tree 新增节点，删除结点，编辑结点的解决方案 最近项目需求如下，想做一个菜单管理，用tree的形式，用过element-ui的都知道怎么处理，但是由于ant-design-vue并未提供操作节点方法，遂自己的解决方案如下 <template> <div class="page-header-index-wide"> &l...
可自定义树节点的Tree组件
03-20
`可自定义树节点的Tree组件`是一个专为满足这种需求而设计的功能强大的工具。它允许开发者根据具体项目的需求来定制树形结构的节点展示，提升用户体验并优化数据管理。在本文中，我们将深入探讨这个组件的工作原理、...
【React-admin】构建React应用（2）-基于antd-tree实现联动勾选
chenqk_123的专栏
12-04 739
1.背景 最近在做基于React-admin项目的权限管理系统，所有的权限都是基于api的，即通过为角色下发的具体api来获取用户是否有对某路由可见(根据后端返回的路由表，动态生成前端菜单)以及路由下模块的操作权限(即增删改查)。 在为角色分配具体的权限的时候，是通过Tree组件来进行配置的，管理员勾选用户具有某个模块下(这里的模块指的就是前端路由)的具体的某些功能，设计思路就是，只要是选择了增删改查的任一节点，则用户具有访问该路由的权限，增删改查一个都不选择的时候，用户就没有查看该路由的权限，即该路由(
React+Antd通过Tree组件实现可编辑可拖拽节点树
南城趣味的博客
02-18 6258
import React, { useState, useEffect } from 'react'; import { Tree } from 'antd'; import { PlusOutlined, EditOutlined, MinusOutlined, CheckOutlined, DeleteOutlined, } from '@ant-design/icons'; import styles from './index.less'; const { TreeNode }.
ant-design-editable-tree-table:可编辑的树形表格，有两个分支哦，v4 是 antd v4 的版本
05-01
可编辑的树形表格 有两个分支哦，v4 是 antd v4 的版本 发现一个更好更强大的： 计划学习完这块就不更新此仓库了
右击树形控件实现节点动态添加删除修改（VC 6.0实现）
08-01
本小程序能实现右击树形控件实现节点动态添加删除修改，希望对vc初学者有帮助！（VC 6.0实现）
antd Tree 获取当前节点以及所有上级父节点的id
棠樾的博客
06-09 1万+
项目需求：一个产品树，当点击一个节点的时候获取当前节点以及所有父级节点的id，并调用兄弟组件的方法进行查询操作，查询的结果需要渲染在tablezuji。 1.首先
antd 可编辑树，可搜索
qq_40216244的博客
06-16 1050
react antd 树组件，搜索以及编辑
基于antd Tree实现可编辑菜单树，支持节点新增、删除
weixin_43138550的博客
02-08 1786
基于antd Tree实现可编辑菜单树，支持节点新增、删除
「树形结构」基于 Antd 实现一个动态增加子节点+可拖拽的树
Constantiny的博客
07-24 356
增加节点的节点始终放在最后且可以增加同级节点。而且只有末级可以增加。
antd4 tree带搜索框的可编辑树实现（hooks+ts）
MYG_G
08-11 1949
import React, { useEffect, useState } from 'react'; import { dispatch, getState } from '@@/store'; import { CATEGORY } from '@/services'; import { Input, Tree, Modal, Form, Menu, Dropdown, message, TreeSelect } from 'antd'; import { TCategoryList, TCategor
详述react + ant desgin自定义树的节点，对节点进行重命名新增删除等操作
sxww_zyt的博客
04-03 4518
详述react + ant desgin自定义树的节点，对节点进行重命名新增删除等操作
antd Tree组件点击节点文字实现展开收起
06-07
可以通过在Tree组件中设置onSelect函数来实现点击节点文字展开收起。 具体实现步骤如下： 1. 在Tree组件中设置onSelect函数，该函数会在节点被选中时触发。 ```javascript <Tree onSelect={onSelect} // 其他属性 > // 树节点 </Tree> ``` 2. 在onSelect函数中判断被选中的节点是否有子节点，如果有则展开节点，否则不做任何操作。 ```javascript const onSelect = (selectedKeys, { node }) => { const { children } = node.props; if (children) { setExpandedKeys(expandedKeys => { const index = expandedKeys.indexOf(selectedKeys[0]); if (index > -1) { // 如果节点已展开，则收起节点 return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)]; } else { // 如果节点未展开，则展开节点 return [...expandedKeys, selectedKeys[0]]; } }); } } ``` 3. 在Tree组件中设置expandedKeys属性，该属性为展开的节点的key的数组。 ```javascript <Tree onSelect={onSelect} expandedKeys={expandedKeys} // 其他属性 > // 树节点 </Tree> ``` 完整代码如下： ```javascript import React, { useState } from 'react'; import { Tree } from 'antd'; const Demo = () => { const [expandedKeys, setExpandedKeys] = useState([]); const onSelect = (selectedKeys, { node }) => { const { children } = node.props; if (children) { setExpandedKeys(expandedKeys => { const index = expandedKeys.indexOf(selectedKeys[0]); if (index > -1) { // 如果节点已展开，则收起节点 return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)]; } else { // 如果节点未展开，则展开节点 return [...expandedKeys, selectedKeys[0]]; } }); } } return ( <Tree onSelect={onSelect} expandedKeys={expandedKeys} > // 树节点 </Tree> ); } export default Demo; ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值