允许用户使用 mysql php 重新排列表数据答案

【问题标题】：Allowing user to re-arrange table data with mysql php允许用户使用 mysql php 重新排列表数据
【发布时间】：2016-06-04 18:03:31
【问题描述】：

我开发了一个系统，因此我的客户可以通过 php 表单将条目添加到 mysql 表中。他希望能够在任何给定时间对条目在网站上显示的顺序进行排序（或重新排列）。我不能让它以任何特定的顺序显示，他必须能够随意定制它。我不知道如何以用户友好的方式做到这一点。我找到的解决方案是基于类别的（即：按字母顺序排序，按 ID 编号排序等），这是行不通的，我需要它是 100% 可定制的，如果他只想移动一件物品，他需要能够到。任何想法将不胜感激。

谢谢！

【问题讨论】：

这是hint
How to sort rows of HTML table that are called from MySQL的可能重复
@roullie 这实际上非常整洁，但是没有人可以用它重新订购商品，包括访客吗？
@MarkM 这不是我需要的。我需要一些允许个人更改的东西，而不是基于类别。例如，我需要用户能够将一个项目移动到任何位置。

标签： php mysql database

【解决方案1】：

您可以使用 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>

新说明：我注意到您提到的 cmets 不想让一般用户使用此功能。您可以在代码周围添加检查，例如

if (user.authenticated) {
    ... code to make rows draggable
}

您可以将 user.authenticated 切换为您在代码中使用的任何内容，以了解允许用户使用拖放操作。

无论您最终使用哪种解决方案，在保存任何行顺序更改之前，请在服务器上再次检查用户的身份验证。

【讨论】：

谢谢！这将有助于解决大部分问题。