React实现table拖拽排序功能

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