可排序表格拖动排序时保持ID固定的实现方案咨询

问题描述 #

使用jQuery UI实现的可排序表格，拖动行调整顺序时，ID列的显示数值会随位置自动更新（例如将Banana行拖到首位，其ID显示变为1，原Apple行变为2等），需要修改代码让每行的ID值保持恒定，不随排序位置改变。

解决方案 #

问题根源是排序后存在自动根据行位置重新赋值ID列的逻辑（或DOM结构不规范导致的意外行为），可通过以下步骤修复：

• 规范表格DOM结构，将表头和数据行分别放入<thead>和<tbody>标签，确保Sortable仅作用于数据行
• 添加排序结束事件，强制ID列始终显示data-id属性中存储的原始值
• 补充缺失的jQuery UI和Font Awesome依赖，确保功能正常运行

修改后的完整代码 #

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="responsive-table">
  <table id="sortable">
    <thead>
      <tr class="ui-state-default">
        <th>Drag Row</th>
        <th>Id</th>
        <th>Fruit</th>
        <th>Quantity</th>
        <th>Image</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><i class="fa fa-bars"></i></td>
        <td data-id="1">1</td>
        <td>Apple</td>
        <td>5</td>
        <td><img src="" alt="noImage" width="30px" height="25px"></td>
      </tr>
      <tr>
        <td><i class="fa fa-bars"></i></td>
        <td data-id="2">2</td>
        <td>Orange</td>
        <td>8</td>
        <td><img src="" alt="noImage" width="30px" height="25px"></td>
      </tr>
      <tr>
        <td><i class="fa fa-bars"></i></td>
        <td data-role="test" data-id="3">3</td>
        <td>Banana</td>
        <td>3</td>
        <td><img src="" alt="noImage" width="30px" height="25px"></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript 部分 #

$(function () {
  $("#sortable tbody")
    .sortable({
      cursor: "move",
      placeholder: "sortable-placeholder",
      helper: function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
          // 保持拖动辅助元素的单元格尺寸与原行一致
          $(this).width($originals.eq(index).width());
        });
        return $helper;
      },
      // 排序结束后重置ID列显示为原始值
      stop: function(event, ui) {
        $("#sortable tbody tr").each(function() {
          const $idCell = $(this).find('td[data-id]');
          $idCell.text($idCell.data('id'));
        });
      }
    })
    .disableSelection();
});

CSS 部分（保持原有样式） #

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 
* {
  font-family : "Open Sans", sans-serif;
  }
.responsive-table {
  overflow : auto;
  }
table {
  width           : 100%;
  border-spacing  : 0;
  border-collapse : collapse;
  white-space     : nowrap;
  }
table th {
  background       : #bdbdbd;
  }
table tr:nth-child(odd) {
  background-color : #f2f2f2;
  }
table tr:nth-child(even) {
  background-color : #e6e6e6;
  }
th,
tr,
td {
  text-align : center;
  border     : 1px solid #e0e0e0;
  padding    : 5px;
  }
img {
  font-style : italic;
  font-size  : 11px;
  }
.fa-bars {
  cursor     : move;
  }

关键说明 #

• 用data-id属性存储每行的原始ID，排序结束后通过stop事件强制ID列显示该属性的值，确保ID不随位置变化
• 分离<thead>和<tbody>避免表头被误拖动，同时明确Sortable的作用范围

内容的提问来源于stack exchange，提问作者garfield