React 基于Ant Degisn 实现table表格列表拖拽排序

效果图:

 代码:

myRow.js

import { MenuOutlined } from '@ant-design/icons';
import { DndContext } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import {arrayMove,SortableContext,useSortable,verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import React, { useState } from 'react';
const myRow = ({ children, ...props }) => {const {attributes,listeners,setNodeRef,setActivatorNodeRef,transform,transition,isDragging,} = useSortable({id: props['data-row-key'],});const style = {...props.style,transform: CSS.Transform.toString(transform && {...transform,scaleY: 1,},),transition,...(isDragging? {position: 'relative',zIndex: 1,}: {}),};return (<tr {...props} ref={setNodeRef} style={style} {...attributes}>{React.Children.map(children, (child) => {if (child.key === 'sort') {return React.cloneElement(child, {children: (<MenuOutlinedref={setActivatorNodeRef}style={{touchAction: 'none',cursor: 'move',}}{...listeners}/>),});}return child;})}</tr>);
};export default myRow;

index.js

import myRow from './myRow';export default () => {const [tableDatasource, setTableDatasource] = useState([]);const tableColumns = [{key: 'sort',width: 20},{title: '印章类型名称',dataIndex: 'yzTypeName',key: 'yzTypeName',width: 150,},{title: '操作人',dataIndex: 'operator',key: 'operator',width: 150,},{title: '操作时间',dataIndex: 'operateDate',key: 'operateDate',width: 150,},{title: "操作",key: "action",width: 100,render: (text, record, index) => {return (<Space size="middle"><a onClick={event => {tableUpdateAction(record);}}>修改</a><Popconfirmtitle="删除印章类别"description="确定要删除吗?"onConfirm={tableDeleteAction.bind(this, record)}onCancel={tableCancelDeleteAction}okText="删除"cancelText="取消"><a>删除</a></Popconfirm></Space>)}}];//注在后端返回的每个对象中,新增一个key 属性 useEffect(() => {getYzTypeList(screeningDate).then((res) => {if (res.code === 200) {const updatedList = res.data.list.map((item, index) => ({...item,key: index + 1,}));setTableDatasource(updatedList);setMyTotal(res.data.total);// message.success("印章类型管理 - 数据已更新");}});}, [screeningDate]);const onDragEnd = ({active, over}) => {if (active.id !== over?.id) {setTableDatasource((previous) => {const activeIndex = previous.findIndex((i) => i.key === active.id);const overIndex = previous.findIndex((i) => i.key === over?.id);return arrayMove(previous, activeIndex, overIndex);});const activeId = active.id;const overId = over?.id;// 在 datasource 中找到匹配 activeId 和 overId 的项const activeItem = tableDatasource.find(item => item.key === activeId);const overItem = tableDatasource.find(item => item.key === overId);}};return (<div><div style={{marginTop: 10}}><DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}><SortableContextitems={tableDatasource.map((i) => i.key)}strategy={verticalListSortingStrategy}><Tablecomponents={{body: {row: myRow,},}}rowKey="key"columns={tableColumns} dataSource={tableDatasource} size={"middle"}pagination={false}/></SortableContext></DndContext></div></div>);
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

std::for_each 简单使用

首先简单使用一下 std::for_each 是C标准库中的一个算法&#xff0c;用于对指定范围内的元素执行指定的操作。它通常用于迭代容器中的元素&#xff0c;对每个元素执行某种操作。下面是一个简单的例子&#xff0c;说明如何使用 std::for_each&#xff1a; #include <iostre…

.Net 全局过滤,防止SQL注入

问题背景&#xff1a;由于公司需要整改的老系统的漏洞检查&#xff0c;而系统就是没有使用参数化SQL即拼接查询语句开发的程序&#xff0c;导致漏洞扫描出现大量SQL注入问题。 解决方法&#xff1a;最好的办法就是不写拼接SQL&#xff0c;改用参数化SQL&#xff0c;推荐新项目…

2023年的年度总结PPT不一样了?

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 到了年终&#xff0c;需要撰写年度总结和制定计划了吗&#xff1f; 找不到合适的 PPT 模板&#xff1f; 感到缺乏灵感&#xff1f; 为做 PPT 绞尽脑汁&#xff1f; 为何不试试 AI 写 PPT 呢&#xff1f…

SQL笔记 -- 范式(第一范式、第二范式、第三范式、巴斯范式、反范式)及数据库设计原则

1.范式 1.1 范式简介 在关系型数据库中&#xff0c;关于数据表设计的基本原则、规则就称为范式。可以理解为&#xff0c;一张数据表的设计结构需要满足的某种设计标准的级别 。要想设计一个结构合理的关系型数据库&#xff0c;必须满足一定的范式。 目前关系型数据库有六种常…

Spring MVC学习之——自定义日期转化器

日期转换器 在数据库中的日期数据是date类型&#xff0c;而如何我们想在页面自己添加数据&#xff0c;一般是使用年-月-日的形式&#xff0c;这种形式不仅date类型接收不到&#xff0c;而且传来的是String类型&#xff0c;此时&#xff0c;我们就可以自定义日期转换器来接收数…

【MySQL】权限控制

DCL-权限控制 查询权限 show grants for 用户名主机名;授予权限 grant 权限列表 on 数据库名.表名 to 用户名主机名;grant all on test.* to user%; %是通配符&#xff0c;表示任意主机。撤销权限 revoke 权限列表 on 数据库名.表名 from 用户名主机名;revoke all on test.*…

顶顶通呼叫中心中间件自动外呼来电转人工显示被叫号码而不是显示路由条件 :一步步配置(mod_cti基于FreeSWITCH)

介绍 顶顶通呼叫中心中间件自动外呼来电转人工显示被叫号码而不是显示自动外呼的路由条件&#xff0c;可以是默认的被叫号码也可以改为显示指定的号码 一、显示默认被叫 1、配置拨号方案 打开ccadmin-》点击拨号方案-》找到进入排队-》配置跟图中一样的通道变量。修改了拨号…

关于KT6368A双模蓝牙芯片的BLE在ios的lightblue大数量数据测试

测试简介 关于KT6368A双模蓝牙芯片的BLE在ios的lightblue app大数量数据测试 测试环境&#xff1a;iphone7 。KT6368A双模程序96B6 App&#xff1a;lightblue ios端 可以打开log日志查看通讯流程 测试数据&#xff1a;长度是1224个字节&#xff0c;单次直接发给KT6368A&a…

Pixels:重新定义游戏体验的区块链农场游戏

数据源&#xff1a;Pixels Dashboard 作者&#xff1a;lesleyfootprint.network 最近&#xff0c;Pixels 通过从 Polygon 转移到 Sky Mavis 旗下的 Ronin 网络&#xff0c;完成了一次战略性的转变。 Pixels 每日交易量 Pixels 在 Ronin 网络上的受欢迎程度急剧上升&#xf…

073:vue+mapbox 加载here地图(影像瓦片图 v3版)

第073个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中加载here地图的影像瓦片图。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共77行)相关API参考:专栏目标示例效果

模型之掷骰子问题

掷骰子问题 假设我要掷一对骰子&#xff0c;想要了解它们的行为如何。经验告诉我&#xff0c;问某些问题根本是不现实的。例如&#xff0c;不可能期待有人能预先告诉我某一次掷骰子的结果&#xff0c;即便是他掌握了很高超的科技&#xff0c;并且用机器来掷骰子。与此相反的是…

Jxls 实现动态导出功能

目录 引言前端页面后端代码excel模板导出效果 引言 在实际做项目的过程中&#xff0c;导出报表时需要根据每个人所关注的点不一样&#xff0c;所需导出的字段也不一样&#xff0c;这时后端就需要根据每个所选的字段去相应的报表&#xff0c;这就是本文要讲的动态导出报表。 前端…

LabVIEW图像识别检测机械零件故障

项目背景&#xff1a; 在工业生产中&#xff0c;零件尺寸的准确检测对保证产品质量至关重要。传统的人工测量方法不仅耗时费力&#xff0c;精度低&#xff0c;还容易导致零件的接触磨损。为了解决这些问题&#xff0c;开发了一套基于LabVIEW和机器视觉的机械零件检测系统。该系…

【Java实战项目】基于ssm的数据结构课程网络学习平台

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Modbus协议学习第三篇之协议通信规则

导语 本篇博客将深入介绍Modbus协议的一些内容&#xff0c;主要包括通讯方式和通讯模型的介绍 Modbus通讯方式 Modbus协议是单主机、多从机的通信协议&#xff0c;即同一时间&#xff0c;总线上只能有一个主设备&#xff0c;但可以有一个或者多个从设备&#xff08;最多好像是2…

CSS实现图片放大缩小的几种方法

参考 方法一&#xff1a; 常用使用img标签&#xff0c;制定width或者height的任意一个&#xff0c;图片会自动等比例缩小 <div><img src"https://avatar.csdn.net/8/5/D/1_u012941315.jpg"/> </div> <!-- CSS--> <style> img {widt…

在Windows 10的PowerShell上实现对Linux机器,vscode同样可登录

在Windows 10的PowerShell上实现对Linux机器&#xff08;如 test192.168.10.13&#xff09;的SSH免密登录 1.检查SSH客户端&#xff1a;确保你的Windows 10系统已安装SSH客户端。 如果看到相关的命令说明&#xff0c;那么SSH客户端已安装。 在PowerShell中输入: ssh2.生成SSH…

Canvas和Three.js区别

Canvas&#xff1a; Canvas和Three.js都是用于在网页上创建和显示图形的工具&#xff0c;但它们的重点不同。Canvas是一个HTML5定义的标签&#xff0c;通过Canvas&#xff0c;你可以直接使用JavaScript来绘制线条、形状、文本和图像等。它有一套丰富的API&#xff0c;允许进行…

STM32F103标准外设库——中断应用/事件控制器(六)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

2024年1月17日Arxiv热门NLP大模型论文:THE FAISS LIBRARY

Meta革新搜索技术&#xff01;提出Faiss库引领向量数据库性能飞跃 引言&#xff1a;向量数据库的兴起与发展 随着人工智能应用的迅速增长&#xff0c;需要存储和索引的嵌入向量&#xff08;embeddings&#xff09;数量也在急剧增加。嵌入向量是由神经网络生成的向量表示&…