前端表格进行拖动排序,

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)调用回调函数,在回调函数中进行与后台的交互

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐