資訊專欄INFORMATION COLUMN
摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫中，做了小時(shí)，做出來了。現(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁面排序，但數(shù)據(jù)庫還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過方式把排序完成的每個(gè)行的傳到后臺(tái)。
前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好這時(shí)我想起了可以利用jqueryUi插件實(shí)現(xiàn)這個(gè)功能。但是jqueryUi插件只能在當(dāng)前頁面上排序，頁面一刷新又恢復(fù)原樣了。于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫中，做了1小時(shí)，做出來了。這里記錄一下，如果有同學(xué)有更好的思路，請(qǐng)不吝賜教..
首先下載jqueryUi插件，網(wǎng)上一搜就要，這里略過。
下載完成后，引入頁面。加入一行代碼就可以:
需要注意的是，選擇器應(yīng)該選中表格的tbody. sort方法中可以添加很多配置的參數(shù)，具體的可以查看這款插件的文檔。同樣網(wǎng)上一搜一大堆，比如菜鳥教程就有。現(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁面排序，但數(shù)據(jù)庫還是老樣子。下面是我的把排序保存到數(shù)據(jù)庫的方法。之前我的排序是按照數(shù)據(jù)表的ID值，默認(rèn)倒序的，現(xiàn)在我可以給數(shù)據(jù)表中加一個(gè)sort字段，或者XX字段，代表排序的數(shù)字。 在每次拖動(dòng)完成后，利用這款插件內(nèi)置的update函數(shù)，通過ajax方式把排序完成的每個(gè)行的ID傳到后臺(tái)。在后臺(tái)控制器里接收后，遍歷，把排在第一行的數(shù)據(jù)的sort值改為鍵值+1.
比如排序完成后第一行的數(shù)據(jù)ID值為8,第二行的數(shù)據(jù)ID為6，第三行為2，后臺(tái)接收遍歷時(shí)，ID為8的數(shù)據(jù)肯定是第一個(gè)遍歷的，那該數(shù)據(jù)在foreach里面的鍵值肯定是0，即$k為0，那把它的排序改為$k+1即為0+1等于1.同理，第二個(gè)數(shù)據(jù)的sort就為$k+1即為2，以此類推.然后按sort值正序排列即可.
下面是前臺(tái)代碼:
$("#sort tbody").sortable({
update:function () {
var idArr = [];
$("input[name="id"]").each(function () {//遍歷每一行的ID值
idArr.push($(this).val());//把拍完序的數(shù)據(jù)ID依次推入數(shù)組
})
$.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);
}
});
}
});
這個(gè)是一個(gè)老項(xiàng)目，TP3寫的，所以我沒用TP5的寫法，TP5只需要把url地址改為{:url(...)}的寫法就行.
后臺(tái)代碼:(也是TP3的寫法,TP5只要用model方法取表模型,然后再改改save方法就可以)
public function pinyong(){
if (IS_POST) {
//前臺(tái)post方式傳數(shù)組的話，后臺(tái)必須指定接收格式才能接收，否則會(huì)報(bào)錯(cuò)
$arr = I("idArr/a");
foreach ($arr as $k => $v) {
M("pinyong")->where("id","eq",$v)->save(["sort"=>$k + 1]);
}
$this->success("排序成功");
} else {
$this->display();
}
}
這樣,每次前臺(tái)拖動(dòng)排序都會(huì)觸發(fā)update函數(shù)，然后就會(huì)把新排序的ID值用ajax傳到后臺(tái)，后臺(tái)接收后，按順序重新修改sort值就可以.
這樣，一個(gè)簡單的功能就實(shí)現(xiàn)了，歡迎拍磚哈.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53881.html
摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫中，做了小時(shí)，做出來了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁面排序，但數(shù)據(jù)庫還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過方式把排序完成的每個(gè)行的傳到后臺(tái)。 前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...
摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫中，做了小時(shí)，做出來了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁面排序，但數(shù)據(jù)庫還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過方式把排序完成的每個(gè)行的傳到后臺(tái)。 前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...
摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫中，做了小時(shí)，做出來了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁面排序，但數(shù)據(jù)庫還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過方式把排序完成的每個(gè)行的傳到后臺(tái)。 前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...
摘要：前言自己做的項(xiàng)目碰到這樣一個(gè)需求，就是對(duì)所有的表格添加表頭可以拖動(dòng)的效果。需要說明的是，表頭固定的那種是需要用兩個(gè)去實(shí)現(xiàn)，做過的人應(yīng)該也都明白。拜拜后續(xù)補(bǔ)充更改了寬度改變的方式，應(yīng)該是只改變拖動(dòng)列后面的列的寬度。 前言 自己做的項(xiàng)目碰到這樣一個(gè)需求，就是對(duì)所有的表格添加表頭可以拖動(dòng)的效果。我一想，這不簡單，分分鐘鐘給你做出來。拿起我的電腦，啪啪啪就敲起來了。showImg(https:...
閱讀 1537·2023-04-26 00:25
閱讀 923·2021-09-27 13:36
閱讀 934·2019-08-30 14:14
閱讀 2184·2019-08-29 17:10
閱讀 1018·2019-08-29 15:09
閱讀 1953·2019-08-28 18:21
閱讀 971·2019-08-26 13:27
閱讀 984·2019-08-26 10:58
