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

目的：使用jquery ui库实现对表格拖拽排序，并且把排序保存到数据库中

效果如下

一、准备工作：

1、下载jquery ui库，可以直接引用线上路径

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，为每一条目生成新的序号，最后更新数据库

前端代码

	

		

			
课件名
			
课件类型
			
发送班级
		
	
	

        

            
内容...
            
内容...
            
内容...
        
    

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;
        }
	}