资讯专栏INFORMATION COLUMN

TP5实现表格拖动排序并保存到数据库功能

zhiwei / 695人阅读

摘要:于是我就研究如何拖动排序并永久把排序保存到数据库中,做了小时,做出来了。现在只是实现了在当前页面排序,但数据库还是老样子。在每次拖动完成后,利用这款插件内置的函数,通过方式把排序完成的每个行的传到后台。

前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好这时我想起了可以利用jqueryUi插件实现这个功能。但是jqueryUi插件只能在当前页面上排序,页面一刷新又恢复原样了。于是我就研究如何拖动排序并永久把排序保存到数据库中,做了1小时,做出来了。这里记录一下,如果有同学有更好的思路,请不吝赐教..
首先下载jqueryUi插件,网上一搜就要,这里略过。
下载完成后,引入页面。加入一行代码就可以:

需要注意的是,选择器应该选中表格的tbody. sort方法中可以添加很多配置的参数,具体的可以查看这款插件的文档。同样网上一搜一大堆,比如菜鸟教程就有。现在只是实现了在当前页面排序,但数据库还是老样子。下面是我的把排序保存到数据库的方法。之前我的排序是按照数据表的ID值,默认倒序的,现在我可以给数据表中加一个sort字段,或者XX字段,代表排序的数字。 在每次拖动完成后,利用这款插件内置的update函数,通过ajax方式把排序完成的每个行的ID传到后台。在后台控制器里接收后,遍历,把排在第一行的数据的sort值改为键值+1.
比如排序完成后第一行的数据ID值为8,第二行的数据ID为6,第三行为2,后台接收遍历时,ID为8的数据肯定是第一个遍历的,那该数据在foreach里面的键值肯定是0,即$k为0,那把它的排序改为$k+1即为0+1等于1.同理,第二个数据的sort就为$k+1即为2,以此类推.然后按sort值正序排列即可.
下面是前台代码:

$("#sort tbody").sortable({

        update:function () {
            var idArr = [];
            $("input[name="id"]").each(function () {//遍历每一行的ID值
                idArr.push($(this).val());//把拍完序的数据ID依次推入数组
            })
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "__URL__/staff/pinyong",
                data:{idArr:idArr},
                success:function (data) {
                    layer.msg(data["msg"],{icon:1,time:2000});
                },
                error:function (request) {
                    console.log(request);
                }
            });
        }
    });
    

这个是一个老项目,TP3写的,所以我没用TP5的写法,TP5只需要把url地址改为{:url(...)}的写法就行.

后台代码:(也是TP3的写法,TP5只要用model方法取表模型,然后再改改save方法就可以)
public function pinyong(){

   if (IS_POST) {
        //前台post方式传数组的话,后台必须指定接收格式才能接收,否则会报错
        $arr = I("idArr/a");
        foreach ($arr as $k => $v) {
            M("pinyong")->where("id","eq",$v)->save(["sort"=>$k + 1]);
        }
        $this->success("排序成功");
    } else {
        $this->display();
    }
}

这样,每次前台拖动排序都会触发update函数,然后就会把新排序的ID值用ajax传到后台,后台接收后,按顺序重新修改sort值就可以.
这样,一个简单的功能就实现了,欢迎拍砖哈.



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53881.html

相关文章

  • TP5实现表格拖动排序保存据库功能

    摘要:于是我就研究如何拖动排序并永久把排序保存到数据库中,做了小时,做出来了。现在只是实现了在当前页面排序,但数据库还是老样子。在每次拖动完成后,利用这款插件内置的函数,通过方式把排序完成的每个行的传到后台。 前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好...

    Aomine 评论0 收藏0
  • TP5实现表格拖动排序保存据库功能

    摘要:于是我就研究如何拖动排序并永久把排序保存到数据库中,做了小时,做出来了。现在只是实现了在当前页面排序,但数据库还是老样子。在每次拖动完成后,利用这款插件内置的函数,通过方式把排序完成的每个行的传到后台。 前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好...

    nevermind 评论0 收藏0
  • TP5实现表格拖动排序保存据库功能

    摘要:于是我就研究如何拖动排序并永久把排序保存到数据库中,做了小时,做出来了。现在只是实现了在当前页面排序,但数据库还是老样子。在每次拖动完成后,利用这款插件内置的函数,通过方式把排序完成的每个行的传到后台。 前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好...

    wudengzan 评论0 收藏0
  • 拖动table表头的实现

    摘要:前言自己做的项目碰到这样一个需求,就是对所有的表格添加表头可以拖动的效果。需要说明的是,表头固定的那种是需要用两个去实现,做过的人应该也都明白。拜拜后续补充更改了宽度改变的方式,应该是只改变拖动列后面的列的宽度。 前言 自己做的项目碰到这样一个需求,就是对所有的表格添加表头可以拖动的效果。我一想,这不简单,分分钟钟给你做出来。拿起我的电脑,啪啪啪就敲起来了。showImg(https:...

    paulli3 评论0 收藏0

发表评论

0条评论

zhiwei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<