React+Antd通过Tree组件实现可编辑可拖拽节点树

本文介绍了如何在React应用中结合Ant Design的Tree组件,实现节点的编辑与拖拽功能。通过利用JavaScript和Antd库,我们可以创建一个交互性强、用户体验良好的动态树形结构。

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

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 } = Tree;

const DragTable = () => {
  let data = [
    {
      value: '董事会',
      defaultValue: '董事会',
      key: '0-1',
      parentKey: '0',
      isEditable: false,
      children: [
        {
          value: '小白龙',
          defaultValue: '小白龙',
          key: '0-1-1',
          parentKey: '1-1',
          isEditable: false,
          children: [
            {
              value: '小红',
              defaultValue: '小红',
              key: '0-1-11',
              parentKey: '1-11',
              isEditable: false,
            },
            {
              value: '小绿',
              defaultValue: '小绿',
              key: '0-1-12',
              parentKey: '1-12',
              isEditable: false,
            },
            {
              value: '小青',
              defaultValue: '小青',
              key: '0-1-13',
              parentKey: '1-13',
              isEditable: false,
            },
          ],
        },
      ],
    },
    {
      value: '财务部',
      defaultValue: '财务部',
      key: '0-2',
      parentKey: '1',
      isEditable: false,
      children: [
        {
          value: '小红',
          defaultValue: '小红',
          key: '0-2-1',
          parentKey: '2-1',
          isEditable: false,
        },
        {
          value: '小绿',
          defaultValue: '小绿',
          key: '0-2-2',
          parentKey: '2-2',
          isEditable: false,
        },
        {
          value: '小青',
          defaultValue: '小青',
          key: '0-2-3',
          parentKey: '2-3',
          isEditable: f
### ReactJSAnt Design Table 组件实现形数据行拖拽功能 为了实现在 `ReactJS` 使用 `Ant Design (antd)` 的 `Table` 组件来处理带有结构的数据并支持行级别的拖拽操作,可以通过自定义 `onRow` 属性以及监听特定的拖拽事件如 `dragstart`, `dragover`, 和 `drop`. 下面展示了一个具体的例子说明如何配置这些属性。 #### 自定义表格行行为 当使用 `Tree Data` 结构时,每一行都可以被看作是一个独立的对象。对于启用拖动特性来说,重要的是为每一条记录赋予唯一的标识符以便于识别正在移动的目标项: ```jsx const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, // ... other column definitions ... ]; // 假设 data 是包含了 children 字段表示子节点的数组形式的状数据源 <Table rowKey="id" dataSource={data} columns={columns} pagination={false} onRow={(record, rowIndex) => ({ draggable: true, onDragStart: e => handleDragStart(e, record), onDragOver: e => handleDragOver(e), onDrop: e => handleDrop(e) })} /> ``` 上述代码片段展示了怎样通过 `onRow` 方法给每一个 `<tr>` 添加额外的行为逻辑[^2]. #### 处理拖拽事件 接下来就是编写用于响应不同阶段拖拽动作的方法: - **handleDragStart**: 当用户开始拖拽某一行的时候触发此函数,并在此处保存当前选中的项目信息; - **handleDragOver**: 此方法会在目标位置上持续调用直到释放鼠标按钮为止,通常用来取消默认的动作防止浏览器执行不必要的操作; - **handleDrop**: 用户松开鼠标结束拖拽过程之后会立即调用该回调,此时应该更新状态以反映新的排列顺序。 下面是这三个辅助函数的具体实现方式: ```javascript import { useState } from "react"; function useSortableData() { const [items, setItems] = useState(initialItems); function moveItem(fromIndex, toIndex) { let newItems = [...items]; if (fromIndex === null || toIndex === null) return; const itemToMove = newItems.splice(fromIndex, 1)[0]; newItems.splice(toIndex, 0, itemToMove); setItems(newItems); } return { items, moveItem }; } export default function SortableTable({ initialItems }) { const { items, moveItem } = useSortableData(); function handleDragStart(event, record) { event.dataTransfer.setData('text/plain', JSON.stringify(record)); } function handleDragOver(event) { event.preventDefault(); } function findIndexById(id){ return items.findIndex(item=>item.id===id); } function handleDrop(event) { try{ const draggedRecordStr=event.dataTransfer.getData('text'); const draggedRecord=JSON.parse(draggedRecordStr); const targetId = Number(event.currentTarget.dataset.index); // 获取放置区域对应的索引 const sourceIndex=findIndexById(draggedRecord.id); const destinationIndex=targetId; moveItem(sourceIndex,destinationIndex); }catch(error){ console.error("Error during drag and drop:", error.message); } } return ( <Table rowKey="id" dataSource={items} columns={[ /* Your Columns */ ]} pagination={false} onRow={(record, index) => ({ draggable: true, 'data-index': index.toString(), onDragStart: e => handleDragStart(e, record), onDragOver: e => handleDragOver(e), onDrop: e => handleDrop(e) })} /> ); } ``` 这段代码实现了基本的功能需求——允许用户在界面上直观地调整具有层次关系的数据条目之间的相对次序[^4].
评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值