0

テーブル内の特定の行のみを並べ替える必要があります。tablesorter プラグインを使用してソートを行っています ( http://mottie.github.io/tablesorter/js/jquery.tablesorter.js )

ここでjsbinにコーディングした例。

http://jsbin.com/igijer/1/edit

ここで、ユーザーがチェックボックスを選択すると、対応する行がテーブルの先頭に追加されます。選択したチェックボックスをオフにすると、対応する行がテーブルに追加されます。

現在、選択されていない行はソートされていません。私の要件は、チェックボックスが選択されておらず、行がテーブルに追加されるたびに、選択されていない行だけをアルファベット順に並べ替える必要があるということです。

4

1 に答える 1

0

これはうまくいくはずです（demo）：

<table id="ex" class="tablesorter">
  <thead>
    <th class="sorter-false"></th>
    <th>Name</th>
    <th>Contribution</th>
  </thead>
  <!-- add an "info" only (non-sorting) tbody -->
  <tbody class="tablesorter-infoOnly"></tbody>

  <tbody class="names">
    <tr>
      <td><input type="checkbox" /></td>
      <td>Warren Buffet</td>
      <td>business</td>
    </tr>
    <!-- etc -->
  </tbody>
</table>

コード

$(function() {

  $("#ex").tablesorter({ sortList: [[0,0], [1,0]] });

  $('#ex').on('click', 'input:checkbox', function() {
    var $this = $(this);
    if ($this.is(':checked')) {
      $this.closest('tr').prependTo("#ex .tablesorter-infoOnly");
    } else {
      $this.closest('tr').appendTo("#ex .names");
    }
    $this.trigger('update');
  });
});

"names" tbody 内のチェックされていない行の実際の位置 (追加) は、追加されて現在の並べ替えが更新されるため、重要ではありません。

于 2013-05-04T13:54:00.897 に答える