目的：使用jquery ui库实现对表格拖拽排序，并且把排序保存到数据库中
效果如下
一、准备工作：
1、下载jquery ui库，可以直接引用线上路径
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
2、前端我使用的是layui，后端是PHP
二、使用
逻辑说明
1、引入jqueryui库
2、js代码使用jqueryui的update()方法，获取拖动的条目id和当前页码，发送到后台
3、由于我这里后端使用了thinkphp的paginate进行分页，所以为保证在非第一页的拖拽顺序能后前后连上，对页码进行判断，当page=0或page=1时，都令page=1，当page大于1时，令page=page-1，在本身页码上减1
4、生成连续序号：设置每页显示条数pageSize（要和分页时条数一致），拿第3步计算的page乘以pageSize，再加上1，比如说第1页：(page*pageSize)+1 => (0*15)+1=1,(0*15)+2=2,...第2页时：(1*15)+1=16，(1*15)+2=17，目的是在分页时使sort条目新序号能够连接上，不会出现每翻一页都要从1开始的情况（第一页：1、2、3、...15，第二页：16、17...30，第三页：31、32...）
5、遍历所有条目，在sort的基础上加上遍历的索引值$key，为每一条目生成新的序号，最后更新数据库
前端代码
<table class="layui-table box_table" lay-skin="nob" lay-size="lg" style=" text-align: center;" id="sort"><thead><tr><td>课件名</td><td>课件类型</td><td>发送班级</td></tr></thead><tbody><tr><td>内容...</td><td>内容...</td><td>内容...</td></tr></tbody>
</table>JS代码
function GetQueryString(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r!=null)return unescape(r[2]); return null;}// 拖拽排序$(document).ready(function () {$("#sort tbody").sortable({update:function () {var idArr = [];$("input[name='id']").each(function() { //遍历每一行的ID值idArr.push($(this).val()); //把拍完序的数据ID依次推入数组})var page = GetQueryString('page')console.log(idArr)console.log(page)$.ajax({type: "POST",dataType: "json",url: "upsort",data:{idArr:idArr,page:page},success:function (res) {console.log(res)layer.msg(res.message, { icon:1, time: 1000 }, function(){window.location.reload()});},error:function (request) {console.log(request);}});}})})注意：在table外面的加上id="sort"，选择器应该选中表格sort下的tbody
后端控制器
public function upsort(){if (request()->isPost()) {$data = input('post.');$page=$data['page'] ? $data['page']-1 : 0;$res = model('Kejian')->upsort($data['idArr'],$page);if ($res) {return apiResponse('200','操作成功');}else{return apiResponse('110','操作失败');}}else{return apiResponse('110','非法请求');}}后端model模型
public function upsort($idArr,$page){$pageSize = 15; //每页显示条数，与列表分页保持一致$sort = ($page * $pageSize)+1;Db::startTrans();try {foreach ($idArr as $key => $value) {Db::table('kejian')->update(['id'=>$value,'sort'=>$sort+$key]);}Db::commit();return true;} catch (Exception $e) {Db::rollback();return false;}}
