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 ( ); } }

ReactDOM.render( , 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赋值

第四步

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

实现效果

拖拽后

总结

人生本是一场修行 且行且珍惜