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

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

效果如下

【前端】Jquery UI +PHP 实现表格拖动排序_第1张图片

一、准备工作:

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

你可能感兴趣的:(前端技术,ui,jquery,php)