【前端】Jquery UI +PHP 实现表格拖动排序

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