antd table实现拖拽功能

在InDesign中插入并精确对齐表格，需选中单元格，然后拖动到页面边缘：'Table' > 'Insert Table' #生活技巧# #数码产品使用技巧# #设计软件使用技巧#

完整代码

import React, { Component } from "react";

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 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 DragTable extends 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>

);

}

}

export default DragTable;

官方文档：https://3x.ant.design/components/table-cn/

后面又增加了一个需求，对拖拽的数据赋值order，我在函数内，新增了

let {page,pageSize} = this.state;
data [hoverIndex].order = dragRow.order;
data [dragIndex].order = hoverIndex+1+(page-1)*pageSize;

这三句代码，完整函数代码见如下：

moveRow = (dragIndex, hoverIndex) => {

const { data} = this.state;

const dragRow = data[dragIndex];

let {page,pageSize} = this.state;

data[hoverIndex].order = dragRow.order;

data[dragIndex].order = hoverIndex+1+(page-1)*pageSize;

this.setState(

update(this.state, {

dataSource: {

$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],

},

}),

);

};

案例一：

import React from 'react';

import ReactDOM from 'react-dom';

import 'antd/dist/antd.css';

// import './index.css';

import { Table,Input } from 'antd';

// import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';

import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';

import { MenuOutlined } from '@ant-design/icons';

import arrayMove from 'array-move';

const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);

const SortableItem = SortableElement(props => <tr {...props} />);

const SortableContainerCustom = SortableContainer(props => <tbody {...props} />);

const data = [

{

key: '1',

name: 'John Brown',

age: 32,

address: 'New York No. 1 Lake Park',

index: 0,

},

{

key: '2',

name: 'Jim Green',

age: 42,

address: 'London No. 1 Lake Park',

index: 1,

},

{

key: '3',

name: 'Joe Black',

age: 32,

address: 'Sidney No. 1 Lake Park',

index: 2,

},

];

class SortableTable extends React.Component {

state = {

dataSource: data,

};

onSortEnd = ({ oldIndex, newIndex }) => {

const { dataSource } = this.state;

if (oldIndex !== newIndex) {

const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);

console.log('Sorted items: ', newData);

this.setState({ dataSource: newData });

}

};

DraggableContainer = props => (

<SortableContainerCustom

useDragHandle

disableAutoscroll

helperClass="row-dragging"

onSortEnd={this.onSortEnd}

{...props}

/>

);

DraggableBodyRow = ({ className, style, ...restProps }) => {

const { dataSource } = this.state;

// function findIndex base on Table rowKey props and should always be a right array index

const index = dataSource.findIndex(x => x.index === restProps['data-row-key']);

return <SortableItem index={index} {...restProps} />;

};

handleChange =(value,name,index)=> {

const { dataSource } = this.state;

const newData = [...dataSource];

console.log('newData',newData)

newData[index][name] = value;

this.setState({dataSource:newData})

}

render() {

const { dataSource } = this.state;

const columns = [

{

title: 'Sort',

dataIndex: 'sort',

width: 30,

className: 'drag-visible',

render: () => <DragHandle />,

},

{

title: 'Name',

dataIndex: 'name',

className: 'drag-visible',

render: (text, _, index) => <Input value={text} onChange={e => this.handleChange(e.target.value,'name',index)}/>,

},

{

title: 'Age',

dataIndex: 'age',

render: (text, _, index) => <Input value={text} onChange={e => this.handleChange(e.target.value,'age',index)}/>,

},

{

title: 'Address',

dataIndex: 'address',

},

];

return (

<Table

pagination={false}

dataSource={dataSource}

columns={columns}

rowKey="index"

components={{

body: {

wrapper: this.DraggableContainer,

row: this.DraggableBodyRow,

},

}}

/>

);

}

}

export default SortableTable;

网址：antd table实现拖拽功能 https://www.yuejiaxmz.com/news/view/427134

相关内容

element Table 展开行功能 (设置点击行可展开功能)
Alter table auto
MySQL创建日程表实现日程管理功能的实现方法
win11文件不能拖放到软件问题解决（不能拖放文件到soildworks2020）
PHP实现高效日程管理系统：时间管理技巧与代码实践详解
领克01+拖挂房车=对美好生活的向往！
巧用两个type=range input实现区域范围选择 « 张鑫旭
多功能清单
CSS实现居中布局
总是瞎忙和拖延？7款时间计划、日程管理APP，让你实现高效+高薪！

随便看看