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

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

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

首先下载jqueryUi插件，网上一搜就要，这里略过。

下载完成后，引入页面。加入一行代码就可以:

1. <script type="text/javascript" src="jquery-ui.js"></script> 
2.  
3. <script type="text/javascript"> 
4.  
5.   $(document).ready(function(){ 
6.  
7.     $("#sort tbody").sortable(); 
8.  
9. }); 
10.  
11. </script> 

需要注意的是，选择器应该选中表格的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值正序排列即可.

下面是前台代码:

1. $("#sort tbody").sortable({ 
2.  
3.         update:function () { 
4.  
5.             var idArr = []; 
6.  
7.             $("input[name='id']").each(function () {//遍历每一行的ID值 
8.  
9.                 idArr.push($(this).val());//把拍完序的数据ID依次推入数组 
10.  
11.             }) 
12.  
13.             $.ajax({ 
14.  
15.                 type: "POST", 
16.  
17.                 dataType: "json", 
18.  
19.                 url: "__URL__/staff/pinyong", 
20.  
21.                 data:{idArr:idArr}, 
22.  
23.                 success:function (data) { 
24.  
25.                     layer.msg(data['msg'],{icon:1,time:2000}); 
26.  
27.                 }, 
28.  
29.                 error:function (request) { 
30.  
31.                     console.log(request); 
32.  
33.                 } 
34.  
35.             }); 
36.  
37.         } 
38.  
39.     }); 

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

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

1. public function pinyong(){ 
2.  
3.  if (IS_POST) { 
4.  
5.       //前台post方式传数组的话，后台必须指定接收格式才能接收，否则会报错 
6.  
7.       $arr = I('idArr/a'); 
8.  
9.       foreach ($arr as $k => $v) { 
10.  
11.           M('pinyong')->where('id','eq',$v)->save(['sort'=>$k + 1]); 
12.  
13.       } 
14.  
15.       $this->success('排序成功'); 
16.  
17.   } else { 
18.  
19.       $this->display(); 
20.  
21.   } 

这样,每次前台拖动排序都会触发update函数，然后就会把新排序的ID值用ajax传到后台，后台接收后，按顺序重新修改sort值就可以.