共计 1611 个字符，预计需要花费 5 分钟才能阅读完成。
前一段时间修改了一个旧的项目，客户要求我给表格重新排序，按医生的职称排序。因为客户的这个项目是医院的人事系统，考虑到整个医院有几千号人，要是一个个按客户的要求排得累坏我的小腰 … 幸好这时我想起了可以利用 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 值就可以.
这样，一个简单的功能就实现了，欢迎拍砖哈.