React实现table拖拽排序功能

11 篇文章 0 订阅
9 篇文章 0 订阅

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

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值