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值就能夠.
這樣，一個簡單的功能就實現了，歡迎拍磚哈.