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

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

$(document).ready(function(){
    $("#sort tbody").sortable();
});

</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值正序排列便可.
下面是前台代码:

$("#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值就能够.
这样，一个简单的功能就实现了，欢迎拍砖哈.