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

＆＃13;

$(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;
      })
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

所以你不需要匹配各行的相应值。

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

我希望它有所帮助

Answer 3

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

第一个表只包含ID列，第二个表包含Title列。然后你可以使用css给它一个表的外观。之后，只需将第二个表排序即可。

这是一个例子

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

也是fiddle

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

3 个答案: