【前端】Jquery UI +PHP 实现表格拖动排序

要使用jQuery UI和PHP实现表格的拖动排序，你需要做以下几步：

1. 引入jQuery和jQuery UI库。
2. 使用jQuery UI的sortable()方法使表格行可拖动。
3. 通过Ajax将新的顺序发送到服务器端的PHP脚本。
4. PHP脚本接收排序数据，处理更新数据库顺序的逻辑。

以下是实现这些步骤的示例代码：

HTML:

<table id="sortable-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Sort Order</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>Item 1</td>
      <td>1</td>
    </tr>
    <tr data-id="2">
      <td>Item 2</td>
      <td>2</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>
 
<button id="save-sort">Save Sort</button>

JavaScript (使用jQuery):

$(function() {
  $('#sortable-table tbody').sortable({
    update: function(event, ui) {
      var sortable = $(this).sortable;
      var sortedIDs = sortable('toArray');
      
      $.ajax({
        url: 'sort.php',
        type: 'POST',
        data: {
          sortOrder: sortedIDs
        },
        success: function(response) {
          console.log(response);
        }
      });
    }
  });
  
  $('#save-sort').click(function() {
    $('#sortable-table tbody').sortable('disable');
  });
});

PHP (sort.php):

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $sortOrder = $_POST['sortOrder'];
  
  // 连接数据库...
  // 更新数据库中的顺序
  foreach ($sortOrder as $index => $id) {
    $sql = "UPDATE your_table SET sort_order = ? WHERE id = ?";
    // 使用相应的数据库库语言执行SQL语句，并绑定参数 $index + 1 和 $id
  }
  
  echo "Sort order updated successfully.";
}
?>

确保替换your_table和sort_order为你的数据库表名和列名。这个PHP脚本会在每次更新排序时被调用，并根据从JavaScript发送来的新顺序更新数据库。记得在实际环境中添加必要的数据库连接和错误处理代码。