0

0

TP5实现表格拖动排序并保存到数据库的方法(附代码)

不言

不言

发布时间:2019-03-20 10:44:34

|

3799人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于tp5实现表格拖动排序并保存到数据库的方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好这时我想起了可以利用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方法就可以)

Adrenaline
Adrenaline

软件调试助手,识别和修复代码中错误

下载
  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值就可以.

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 9.3万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 10.8万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号