ant design中实现table的表格行的拖拽
作者:前端歌谣 发布时间:2024-06-09 19:51:02
标签:ant,design,table,表格行,拖拽
前言:
首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路, 然后就打开官网的文档进行观看。一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码
代码部分:
import { Table } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
let dragingIndex = -1;
class BodyRow extends React.Component {
render() {
const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps }
= this.props;
const style = { ...restProps.style, cursor: 'move' };
let { className } = restProps;
if (isOver) {
if (restProps.index > dragingIndex) {
className += ' drop-over-downward';
}
if (restProps.index < dragingIndex) {
className += ' drop-over-upward';
}
}
return connectDragSource(
connectDropTarget(<tr {...restProps} className={className} style={style} />),
);
}
}
const rowSource = {
beginDrag(props) {
dragingIndex = props.index;
return {
index: props.index,
};
},
};
const rowTarget = {
drop(props, monitor) {
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}
// Time to actually perform the action
props.moveRow(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
},
};
const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
}))(
DragSource('row', rowSource, connect => ({
connectDragSource: connect.dragSource(),
}))(BodyRow),
);
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
class DragSortingTable extends React.Component {
state = {
data: [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
],
};
components = {
body: {
row: DragableBodyRow,
},
};
moveRow = (dragIndex, hoverIndex) => {
const { data } = this.state;
const dragRow = data[dragIndex];
this.setState(
update(this.state, {
data: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
},
}),
);
};
render() {
return (
<DndProvider backend={HTML5Backend}>
<Table
columns={columns}
dataSource={this.state.data}
components={this.components}
onRow={(record, index) => ({
index,
moveRow: this.moveRow,
})}
/>
</DndProvider>
);
}
}
ReactDOM.render(<DragSortingTable />, mountNode);
#components-table-demo-drag-sorting tr.drop-over-downward td {
border-bottom: 2px dashed #1890ff;
}
#components-table-demo-drag-sorting tr.drop-over-upward td {
border-top: 2px dashed #1890ff;
}
这是官网的示例 ,那么我们如何实现呢?
第一步 引入第一个类
第二步 找准数据
第三步 进行数据的一个赋值我这边是dva.js赋值
第四步 回调或者确定按钮处理数据(这边是确定按钮处理值然后调接口)
总结:
这样的话 表格行就可以进行拖拽操作了
来源:https://blog.51cto.com/u_14476028/5133308


猜你喜欢
- 最近更新了VS Code之后,发现Remote-ssh拓展里的端口转发功能没了,很伤心,在探索的同时,顺手配置了一下VS Code ssh免
- 本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下:由于刚接触Tree方面的东西。在网上看到了
- 本文实例讲述了JavaScript常用数学函数用法。分享给大家供大家参考,具体如下:一、代码<script language=&quo
- 有时我们需要将一份或者多份PDF文件中的图片提取出来,如果采取在线的网站实现的话又担心图片泄漏,手动操作又觉得麻烦,其实用Python也可以
- 作者的blog :http://www.planabc.net/老甘的《完全用CSS实现的中英文双语导航菜单》一文中使用“position:
- Pytorch转ONNX的意义一般来说转ONNX只是一个手段,在之后得到ONNX模型后还需要再将它做转换,比如转换到TensorRT上完成部
- 在 Web 编辑器领域,CKEditor – 七年的专注,赢取的是王者风范。TinyMCE – 五年前的小家碧玉,如今已成长为大家闺秀。Go
- 开发过程中,props 的使用有两种写法:// 字符串数组写法const subComponent = { props: ['nam
- 区块链实战字节字段说明4版本区块版本号,表示本区块遵守的验证规则32父区块头哈希值前一区块的Merkle树根的哈希值,同样采取SHA256计
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML&n
- 简介在生产环境上,为了避免数据的丢失,通常情况下都会定时的对数据库进行备份。而Linux的crontab指令则可以帮助我们实现对数据库定时进
- 获取文件目录的方法 :import os# '***获取当前目录***'os.getcwd()# '***获取上级目
- 去年中秋开始,小编一直在忙旅游公司的30多个网站,在网站项目中,网站客服需要在网站中添加某个客服交谈工具代码,还需要对PC和手机添加不一样的
- 前言:在前面一些文章中,经常能看到介绍某某参数的作用,可能有些小伙伴仍搞不清楚 MySQL 参数是啥。本篇文章我们来聊聊 MySQL 参数,
- 写在前面今天Python笔记的内容是:异常处理一旦Python脚本发生异常,程序需捕获并处理异常。异常处理使得程序能够在处理异常后继续正常执
- 注意:安装时要保证Oracle安装目录不能带有中文字符(如果第一次安装出现“加载数据库错误areasQueries”的错误,一般是因为Ora
- 本文实例讲述了Flask教程之重定向与错误处理。分享给大家供大家参考,具体如下:Flask类有一个redirect()方法. 当我们调用它时
- 前言最近因为业务需求,就写了这个脚本,脚本完成的任务是从FTP上下载一个目录,大家都知道从FTP上下载一个文件可用用get命令,下载多个文件
- 从而达到方便快捷的目的,但是它在存储信息的时候往往会有一些敏感的东西,这些东西可能成为被攻击的目标,如银行的账号、信用卡事务或档案记录等。这
- 原先的ctrl+alt+L容易和各种软件的快捷键冲突在setting——keymap——右边搜索栏搜索Reformat Code就会出现该设