排序 拖动数据库 php,TP5实现表格拖动排序并保存到数据库的方法(附代码)

本篇文章给大家带来的内容是关于TP5实现表格拖动排序并保存到数据库的方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前一段时间修改了一个旧的项目,客户要求我给表格重新排序,按医生的职称排序。因为客户的这个项目是医院的人事系统,考虑到整个医院有几千号人,要是一个个按客户的要求排得累坏我的小腰...幸好这时我想起了可以利用jqueryUi插件实现这个功能。但是jqueryUi插件只能在当前页面上排序,页面一刷新又恢复原样了。于是我就研究如何拖动排序并永久把排序保存到数据库中,做了1小时,做出来了。这里记录一下,如果有同学有更好的思路,请不吝赐教..

首先下载jqueryUi插件,网上一搜就要,这里略过。

下载完成后,引入页面。加入一行代码就可以:

$(document).ready(function(){

$("#sort tbody").sortable();

});

需要注意的是,选择器应该选中表格的tbody. sort方法中可以添加很多配置的参数,具体的可以查看这款插件的文档。同样网上一搜一大堆,比如菜鸟教程就有。现在只是实现了在当前页面排序,但数据库还是老样子。下面是我的把排序保存到数据库的方法。之前我的排序是按照数据表的ID值,默认倒序的,现在我可以给数据表中加一个sort字段,或者XX字段,代表排序的数字。 在每次拖动完成后,利用这款插件内置的update函数,通过ajax方式把排序完成的每个行的ID传到后台。在后台控制器里接收后,遍历,把排在第一行的数据的sort值改为键值+1.

比如排序完成后第一行的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格拖拽排序,可以使用以下步骤: 1. 给表格中需要排序的行添加拖拽事件监听器。 2. 在拖拽开始时,记录被拖拽的行的索引。 3. 在拖拽过程中,使用一些视觉效果(比如改变背景颜色)来提示用户当前处于哪一行。 4. 在拖拽结束时,将被拖拽的行移动到目标位置,并更新表格数据。 下面是一个简单的实现示例: HTML: ```html <table id="sortable-table"> <thead> <tr> <th>名称</th> <th>数量</th> <th>价格</th> </tr> </thead> <tbody> <tr><td>苹果</td><td>10</td><td>5</td></tr> <tr><td>香蕉</td><td>15</td><td>3</td></tr> <tr><td>橙子</td><td>8</td><td>4</td></tr> <tr><td>梨子</td><td>12</td><td>6</td></tr> </tbody> </table> ``` JavaScript: ```javascript // 获取表格元素 const table = document.getElementById('sortable-table'); // 获取所有可拖拽的行 const rows = table.tBodies[0].rows; // 记录被拖拽的行的索引 let draggingIndex = -1; // 给所有可拖拽的行添加事件监听器 for (let i = 0; i < rows.length; i++) { const row = rows[i]; // 记录当前行的索引 row.draggingIndex = i; // 添加拖拽事件监听器 row.addEventListener('dragstart', e => { // 记录被拖拽的行的索引 draggingIndex = e.target.draggingIndex; // 设置拖拽效果 e.dataTransfer.effectAllowed = 'move'; // 设置拖拽数据 e.dataTransfer.setData('text/html', row.innerHTML); }); // 添加拖拽过程中的事件监听器 row.addEventListener('dragover', e => { // 阻止默认行为,使得drop事件能够触发 e.preventDefault(); // 设置拖拽效果 e.dataTransfer.dropEffect = 'move'; // 获取当前鼠标所在的位置 const y = e.clientY - table.offsetTop; // 遍历所有行,找到当前鼠标所在的位置应该插入的位置 for (let j = 0; j < rows.length; j++) { const row = rows[j]; if (y > row.offsetTop && y < row.offsetTop + row.offsetHeight) { // 如果拖拽的行和目标行不是同一行,则交换位置 if (draggingIndex !== j) { table.tBodies[0].insertBefore(rows[draggingIndex], j > draggingIndex ? rows[j] : rows[j + 1]); break; } } } }); // 添加拖拽结束的事件监听器 row.addEventListener('dragend', e => { // 重置被拖拽的行的索引 draggingIndex = -1; }); } ``` 在这个示例中,我们使用了HTML5的拖拽API来实现表格拖拽排序。在拖拽过程中,我们通过改变被拖拽的行和目标行的位置来实现排序。需要注意的是,这个示例只是一个简单的实现,如果需要支持更复杂的排序方式,比如拖拽多个行或者跨页排序,还需要进行更多的功能扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值