bootstrap-table（七）拖拽排序

需求

这个需求是今天下午老大艾特我发的一张图片

因为我们产品后台有一个组织的模块，其中就因为客户多次提示能不能做排序功能，所以老大就直接截图让我能不能做成钉钉这个样子，然后因为我用到的表格是bootstrap-table,所以我就去网上找了一下，发现在bootstrap-tbale扩展上有一个拖拽的功能库。所以也是花了点时间做到了老大要的效果。

效果

调整排序前

点击调整排序后

然后就可以随心所欲的拖拽排序了。

使用

不过我这里只分享如何使用，至于我做的这个样子或者说我怎么和后台交互的我就不赘述了，因为我觉得只要会用就能hold住具体项目需求（其实我是真的觉得麻烦，讲解我这个项目的话）。

引入所需文件

说明： 这些文件是bootstrap-table拖拽排序额外所需的文件（其实我没用这种形式引入，但是能够引入就行了，嘻嘻）

<link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.bootcss.com/TableDnD/1.0.3/jquery.tablednd.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

方法

这个配置就不用我多说了吧。。。。。。。。。。。。

$('#table').bootstrapTable({
	...........
	reorderableRows: true, //设置拖动排序
    useRowAttrFunc: true, //设置拖动排序
    //当选中行，拖拽时的哪行数据，并且可以获取这行数据的上一行数据和下一行数据
    onReorderRowsDrag: function(table, row) {
	    
	},
	//拖拽完成后的这条数据，并且可以获取这行数据的上一行数据和下一行数据
	onReorderRowsDrop: function(table, row) {
	    
	},
	//当拖拽结束后，整个表格的数据
	onReorderRow: function(newData) {
	    //这里的newData是整个表格数据，数组形式
	    
	}
	................
})