我开发了一个系统,这样我的客户就可以通过 php 表单向 mysql 表添加条目。他希望能够在任何给定时间对条目在网站上显示的顺序进行排序(或重新排列)。我不能让它以任何特定的顺序显示,他必须能够随意定制它。我不知道如何以用户友好的方式做到这一点。我找到的解决方案是基于类别的(即:按字母顺序排序、按 ID 号排序等),这是行不通的,我需要它 100% 可定制,如果他只想移动一项,他需要能够到。任何想法将不胜感激。
谢谢!
最佳答案
您可以使用 jquery ui 或滚动您自己的排序器来让用户拖放。如果您需要保存结果订单,可以使用ajax将其发送回服务器。
除了您提到的其他搜索选项(例如字母排序)之外,此解决方案也可以使用。
现场演示:https://plnkr.co/edit/8YIkN6idxc0d2cH4TbTf?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<style>
table,
th,
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Drag and drop a row</h2>
<table style="width: 500px;">
<thead>
</thead>
<tbody>
<tr>
<td style="background-color: #41CCFA;">1</td>
</tr>
<tr>
<td style="background-color: #FA6F41;">2</td>
</tr>
<tr>
<td style="background-color: #3DFFA8;">3</td>
</tr>
<tr>
<td style="background-color: #70FA41;">4</td>
</tr>
<tr>
<td style="background-color: #FA4441;">5</td>
</tr>
</tbody>
</table>
<script>
var help = function(e, tr) {
var trch = tr.children();
var trcl = tr.clone();
trcl.children().each(function(i) {
$(this).width(trch.eq(i).width());
});
return trcl;
},
updateI = function(e, ui) {
$('tr td:first-child', ui.item.parent()).each(function(i) {
$(this).html(i + 1);
});
};
$("tbody").sortable({
helper: help,
stop: updateI
}).disableSelection();
</script>
</body>
</html>
新注释: 我注意到您在评论中提到不想允许普通用户使用此功能。您可以在代码周围添加检查,例如
if (user.authenticated) {
... code to make rows draggable
}
您可以将 user.authenticated 与您在代码中使用的任何内容进行切换,以了解允许用户使用拖放操作。
无论您最终使用哪种解决方案,请在保存任何行顺序更改之前在服务器上再次检查用户的身份验证。
关于php - 允许用户使用 mysql php 重新排列表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35568432/