react ant 表格实现 拖拽排序和多选

embedded/2024/9/22 17:35:40/

项目背景 : react + ant
要实现 : 有多选功能(实现批量删除 , 也可以全选) + 可以拖拽(可以复制 , 方便顶部的搜索功能)
要实现效果如下

1 这是最初的拖拽功能实现 , 不能复制表格里的内容 , 不符合要求

2 更改了ROW的内容 , 实现了可以复制表格内容
代码

//控制是否可以选中表格里的文字
const Row1 = props => {const {attributes,listeners,setNodeRef,setActivatorNodeRef,transform,transition,isDragging} = useSortable({id: props['data-row-key']})const style = {...props.style,transform: CSS.Translate.toString(transform),transition,...(isDragging? {position: 'relative',zIndex: 9999}: {})}const contextValue = useMemo(() => ({setActivatorNodeRef,listeners}),[setActivatorNodeRef, listeners])return (<RowContext.Provider value={contextValue}><tr {...props} ref={setNodeRef} style={style} {...attributes} /></RowContext.Provider>)
}




3 多选功能ant官网也只提供了rowSelection方法 , 而rowSelection的位置总是在表格最左边 , 我需要让拖拽icon在最左边 , 多选功能在icon右边 , 目前问题如下


 









 

解决思路 : 舍弃了官网的rowSelection方法 , 添加自定义选择列

代码分为俩部分 , 一部分是父页面 , ( 父页面代码太多只显示了功能代码 )

 

import React, { useContext, useMemo, useState, useEffect } from 'react'
import { HolderOutlined } 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'
const RowContext = React.createContext({})//控制是否可以选中表格里的文字
const Row1 = props => {const {attributes,listeners,setNodeRef,setActivatorNodeRef,transform,transition,isDragging} = useSortable({id: props['data-row-key']})const style = {...props.style,transform: CSS.Translate.toString(transform),transition,...(isDragging? {position: 'relative',zIndex: 9999}: {})}const contextValue = useMemo(() => ({setActivatorNodeRef,listeners}),[setActivatorNodeRef, listeners])return (<RowContext.Provider value={contextValue}><tr {...props} ref={setNodeRef} style={style} {...attributes} /></RowContext.Provider>)
}//拖拽图标
const DragHandle = () => {const { setActivatorNodeRef, listeners } = useContext(RowContext)return (<Buttontype='text'size='small'icon={<HolderOutlined />}style={{cursor: 'move'}}ref={setActivatorNodeRef}{...listeners}/>)
}function role () {//被拖拽后请求接口和数据改变const onDragEnd = ({ active, over }) => {if (active.id !== over?.id) {setData(data => {const activeIndex = data.findIndex(item => item?.key === active.id)const overIndex = data.findIndex(item => item?.key === over?.id)const newData = arrayMove(data, activeIndex, overIndex).map((item, index) => ({...item,sort: data.length - index}))// 收集newData中所有对象的id和sort值const updatedItems = newData.map(item => ({id: item.roleId,sort: item.sort}))getSortMethod({ sorts: updatedItems }) //后端接口return arrayMove(data, activeIndex, overIndex)})}}// 让拖拽icon在左侧const columns = [{width: 60,render: () => <DragHandle />},...]return (<><DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}><SortableContextitems={data.map(i => i?.key)}strategy={verticalListSortingStrategy}>{TableComSelect1({loading,data,columns,onSelectionChange: handleSelectionChange, // 选中的表格数量信息传递给表格isSelectAll: isSelectAll, //是否全选rowKey: 'key', //拖拽components: {  //拖拽body: {row: Row1}}})}</SortableContext></DndContext></>)
}export default role




另一部分是封装的表格组件 ( 全部代码如下 )

import React, { useState, useEffect, useContext } from 'react'
import { Table, Button, Checkbox } from 'antd'import SimpleBar from 'simplebar-react'import 'simplebar/dist/simplebar.min.css' // 引入 simplebar 的样式
import './index.less'
import { useTranslation } from 'react-i18next' // 引入 useTranslation 钩子
import i18n from '@/utils/i18n' //国际化组件const TableComSelect1 = props => {const { t } = useTranslation() // 获取翻译函数和语言切换函数const [obj, setObj] = useState({})const {components,rowKey,columns = [],data = [],loading = false,onSelectionChange,isSelectAll} = propsconst [selectedRowKeys, setSelectedRowKeys] = useState([]) //让批量删除后不被选中const [selectionType, setSelectionType] = useState('checkbox')//接收父传递的key 用来控制表格选中const onSelectChange = newSelectedRowKeys => {console.log('selectedRowKeys changed: ', newSelectedRowKeys)setSelectedRowKeys(newSelectedRowKeys) //让子表格可以选中onSelectionChange(newSelectedRowKeys) //将选中的子表格选中的key值赋给父组件}//旧的选择功能,一直在最左侧const rowSelection = {selectedRowKeys,onChange: onSelectChange}// 点击全选useEffect(() => {if (isSelectAll) {setSelectedRowKeys(data.map(item => item.key))} else {setSelectedRowKeys([])}}, [isSelectAll])// 创建一个自定义的选择列const selectionColumn = {width: '100px',title: t('select'), // 或者根据需要设置标题fixed: 'left', // 如果需要固定列,请保留此行render: (_, record) => (<Checkboxchecked={selectedRowKeys.includes(record[rowKey])} // 假设rowKey是用于唯一标识记录的字段onChange={() => {const newSelectedRowKeys = [...selectedRowKeys]if (newSelectedRowKeys.includes(record[rowKey])) {newSelectedRowKeys.splice(newSelectedRowKeys.indexOf(record[rowKey]),1)} else {newSelectedRowKeys.push(record[rowKey])}setSelectedRowKeys(newSelectedRowKeys)onSelectionChange(newSelectedRowKeys) // 更新父组件的选中项}}/>)}// 在columns数组的第二位插入自定义的选择列const updatedColumns = [...columns.slice(0, 1), // 取前一列selectionColumn, // 插入选择列...columns.slice(1) // 取剩余列]return (<div className='TableComSelect1'><SimpleBarstyle={{ maxHeight: '600px', overflowY: 'auto', display: 'block' }}className='SimpleBar'><Tablecomponents={components} // 应用自定义行组件等rowKey={rowKey} // 设置行键columns={updatedColumns}dataSource={data}loading={loading}pagination={false}// rowSelection={{ //旧的选择功能会一直在表格最左边//   ...rowSelection,//   type: selectionType,//   columnTitle: t('select'),//   columnWidth: '100px'// }}scroll={{x: 1700}}></Table></SimpleBar></div>)
}
export default TableComSelect1


http://www.ppmy.cn/embedded/44679.html

相关文章

AI预测福彩3D采取888=3策略+和值012路一缩定乾坤测试5月29日预测第5弹

今天继续基于8883的大底&#xff0c;使用尽可能少的条件进行缩号&#xff0c;同时&#xff0c;同样准备两套方案&#xff0c;一套是我自己的条件进行缩号&#xff0c;另外一套是8883的大底结合2码不定位奖号预测二次缩水来杀号。好了&#xff0c;直接上结果吧~ 首先&…

UDP协议

UDP协议端格式 源端口: 占16位、源端口号。在需要对方回信时选用。不需要时可用全0。 目的端口: 占16位、目的端口号。这在终点交付报文时必须使用。 长度: 占16位、UDP用户数据报的长度,其最小值是8字节(仅有首部&#xff0c;没有数据)。 检验和: 占16位、检测UDP用户数据报…

细说ARM MCU中的MX_GPIO_Init()函数的实现过程

目录 1、建立.ioc工程 2、 MX_GPIO_Init()函数 &#xff08;1&#xff09;MX_GPIO_Init()函数的类型 &#xff08;2&#xff09;MX_GPIO_Init()函数中用到的结构体变量 &#xff08;3&#xff09;MX_GPIO_Init()函数使能时钟 &#xff08;4&#xff09;MX_GPIO_Init()函数…

bhyve:FreeBSD下的原生虚拟机管理器

hbyve简介 自 FreeBSD 10.0-RELEASE 起&#xff0c;BSD 许可的 bhyve 虚拟机管理器已成为底层系统不可或缺的一部分。bhyve 强大而灵活&#xff0c;支持多种客户机操作系统&#xff0c;涵盖 FreeBSD、OpenBSD 以及多个 Linux 发行版。在默认配置下&#xff0c;bhyve 提供对串行…

K210视觉识别模块学习笔记2:固件的下载升级_官方数字识别例程导入方法

今日开始学习K210视觉识别模块:固件的下载升级_官方数字识别例程导入方法 主要学习如何升级固件库&#xff0c;在哪下载固件库&#xff0c;以及如何在TF卡正确导入官方例程&#xff1a; 亚博智能的K210视觉识别模块...... 本次最终目的是正确导入官方的数字识别例程&#xff0…

Flutter 中的 SliverMainAxisGroup 小部件:全面指南

Flutter 中的 SliverMainAxisGroup 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它提供了多种布局和控件来帮助开发者构建高性能、美观的移动和 web 应用。在 Flutter 的滚动和布局体系中&#xff0c;SliverMainAxisGroup 是一个较少…

颠覆传统家居行业?线上3D数字化营销有何魅力?

在数字时代的浪潮中&#xff0c;Z时代年轻用户正成为泛家居行业的消费核心力量。作为数字原生的一代&#xff0c;他们追求的不仅仅是产品本身&#xff0c;更是独特的消费体验。为了迎合这一趋势&#xff0c;泛家居行业正积极引入线上3D数字化沉浸式营销&#xff0c;为用户提供前…

Java设计模式 _行为型模式_访问者模式

一、访问者模式 1、访问者模式 访问者模式&#xff08;Visitor Pattern&#xff09;是一种行为型模式。它允许在不修改已有类结构的情况下&#xff0c;向类中添加新的操作。访问者模式通过将操作封装在一个访问者对象中&#xff0c;使得可以在不改变各个元素类的前提下&#x…