可在指定表列上排序的 Jquery ui

Question

我正在使用HTML 表，其中一些数据被动态添加到表中。 表id 和title 中有两列。我正在使用jQuery UI sortable 对表格行进行排序。 HTML 和JS 如下：

<table class="table table-striped table-bordered" id="questions-list-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>                    
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td>Title 1</td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> Title 2</td>
                </tr>               
            </tbody>
        </table>

            <script>

    $(document).ready(function() {

        $("#questions-list-table tbody").sortable({
            disableSelection: true,
            placeholder: "ui-state-highlight",
            axis:"y",
            stop: function(e) {
                console.log("Sorting started");
            }

        });
    });
</script>

目前整行正在排序。我希望唯一的标题是可排序的，id 列应保留在其原始位置。我该怎么做？

Answer 1

如果 id 列是从 1 开始的序号，则一种可能的解决方案是 t

$(document).ready(function() {

  var start;
  $("#questions-list-table tbody").sortable({
    disableSelection: true,
    placeholder: "ui-state-highlight",
    axis: "y",
    start: function(e, ui) {
      start = ui.item.index();
    },
    stop: function(e, ui) {
      var end = ui.item.index();

      var from = start <= end ? start : end,
        to = start <= end ? end + 1 : start + 1;
      $("#questions-list-table tbody > tr").slice(from, to).find('td:first').text(function(i) {
        return from + i + 1;
      })
    }
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<table class="table table-striped table-bordered" id="questions-list-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Title 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Title 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Title 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Title 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Title 5</td>
    </tr>
  </tbody>
</table>

Answer 2

您希望一次只对一列进行排序。

因此您不需要匹配各个行的相应值。

如果这是您的情况（这不是 Bootstrap 案例），请尝试将其实现为具有一列的两个单独的表

希望对你有帮助

Answer 3

如果您真的只想对一列进行排序，那么唯一的选择是两个使用两个表，正如@vijay kani 所说。

第一个表将仅包含 ID 列，第二个表将包含 Title 列。然后你可以使用 css 让它看起来只有一张桌子。之后，只需使第二个表可排序。

这是一个例子

$("#questions-title-table tbody").sortable({
  disableSelection: true,
  axis: "y"
});

#questions-id-table {
  float: left;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<table id="questions-id-table">
  <thead>
    <tr>
      <th>ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
  </tbody>
</table>
<table id="questions-title-table">
  <thead>
    <tr>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Title 1</td>
    </tr>
    <tr>
      <td>Title 2</td>
    </tr>
  </tbody>
</table>

也是fiddle