目的：使用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;
}
}
