1.使用antd的Table自带排序功能
参照官方文档: https://ant.design/components/table-cn/#components-table-demo-drag-sorting
2.使用sortablejs
插件
可参照文档:https://segmentfault.com/a/1190000008209715
//安装
cnpm install sortablejs --save
//组件内引入
import Sortable from 'sortablejs';
import { Spin } from 'antd';
//在dom渲染后执行初始化
componentDidMount() {
this.draftSort();
}
//拖拽初始化及逻辑
draftSort = () => {
const { dispatch } = this.props; //不使用dva,可忽略
let el = document.getElementById('doctor-drag-items');
let self = this;//可忽略
let sortable = Sortable.create(el, {
animation: 100, //动画参数
onEnd: function (evt) { //拖拽完毕之后发生,只需关注该事件
let id_arr = '';
let len = evt.from.children.length;
const { epartmeneId } = self.state; //后台不传此参数,可忽略
for (let i = 0; i < len; i++) {
id_arr += ',' + evt.from.children[i].getAttribute('drag-id');
}
id_arr = id_arr.substr(1);
//根据后台人员需要发送排好序请求
console.log(id_arr);
//不使用dva以下发送逻辑可忽略
let doctorIds = id_arr.split(',');
dispatch({
type: 'doctorSortManager/sort',
value: {
doctorIds,
epartmeneId
}
});
}
});
}
render
函数模板,下面dom可封装为非受控组件展示
//Spin 为antd加载效果
<Spin spinning={loading}>
<div className="doctor-drag-table">
<table>
<thead>
<tr>
<td>医生编号</td>
<td>职工编号</td>
<td>医生名称</td>
</tr>
</thead>
<tbody id='doctor-drag-items'>
{dataSource.length > 0 ?
dataSource.map((item, index) => {
return <tr drag-id={item.id} style={{ cursor: 'move' }}>
<td><span title={item.doctorId}>{item.doctorId || '-'}</span></td>
<td><span title={item.empNo}>{item.empNo || '-'}</span></td>
<td><span title={item.name}>{item.name || '-'}</span></td>
</tr>
})
:
<tr><td colSpan='10' style={{ textAlign: 'center' }}>暂无数据</td></tr>
}
</tbody>
</table>
</div>
</Spin>
css样式
.sortable-ghost {
border-bottom: 2px dashed #1890ff;
}
.doctor-drag-table {
margin-bottom: 16px;
table {
width: 100%;
td {
padding: 12px;
border-bottom: 1px solid #e8e8e8;
}
thead {
tr {
font-weight: 600;
background: #FAFAFA;
}
}
}
}
实现效果:
如有问题,请联系QQ: 1518667459