0
点赞
收藏
分享

微信扫一扫

#yyds干货盘点# ant design中 table的表格行的拖拽实现

    最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主  放弃很容易但是坚持一定很酷     我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣

前言

   首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路

   然后就打开官网的文档进行观看

开始

   一开始准备写 打开官网的一个文档是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;
}

这是官网的示例 那么我们如何实现呢

第一步 引入第一个类

#yyds干货盘点# ant design中 table的表格行的拖拽实现_官网

第二步 找准数据

#yyds干货盘点# ant design中 table的表格行的拖拽实现_官网_02

第三步 进行数据的一个赋值我这边是dva.js赋值

#yyds干货盘点# ant design中 table的表格行的拖拽实现_官网_03

第四步 回调或者确定按钮处理数据(这边是确定按钮处理值然后调接口)

#yyds干货盘点# ant design中 table的表格行的拖拽实现_数据_04

总结

这样的话 表格行就可以进行拖拽操作了

举报

相关推荐

0 条评论