html table行拖拽后排序

前端表格进行拖动排序，

1.普通表格

普通表格，采用引入  jquery.tablednd.js 的方式进行拖拽排序

使用案例

1）. 在html页面table元素上增加class=“tablednd”

 2）. 在js中引用方法进行初始化

 onDrop方法是拖拽后的回调函数，可按照需要与后台进行一些数据交互。

注意：拖动表格需要给<tr> 加上id属性，不然回调函数不生效

取消拖拽效果

$("#worklistTable tr").addClass("nodrop nodrag");

2.bootstrap table

引入js 及css

bootstrap-table.js bootstrap-table.css
jquery.tablednd.js  bootstrap-table-reorder-rows.js

使用案例

1）在bootstraptable初始化是增加属性 redoerableRow 和useRowAttrFunc 属性

 2）调用回调函数，在回调函数中进行与后台的交互