這篇文章帶給大家的內容是關於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值就可以.
本篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片欄位！
以上是TP5實作表格拖曳排序並儲存到資料庫的方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
