我的 table 排序器中的列排序覆盖了我的 table header 中的 checkall 复选框

Question

我使用的是 jQuery-2.1.3 版本，并将 jQuery table 分拣器应用于每个列标题的 table。我的 table 也有复选框，我需要能够选中第一列中的所有复选框。我正在使用的函数确实正确地检查了所有内容，但也对 table 进行了排序。我也无法取消选中所有，而是该列只是在 ascending/descending 顺序之间切换。

下面是link查看我的例子：http://bitalicious.co/robyn/

<fieldset>
<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <label>
            <!-- checkall is not currentlly working -->
            <input type="checkbox" class="checkall">Business Name
          </label>
        </div>
      </th>
      <th>Contact Name</th>
      <th>Address</th>
      <th>City</th>
      <th>State</th>
      <th class="{sorter: false}"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">ABC Corporation
          </label>
        </div>
      </td>
      <td>Brandon</td>
      <td>290 Plano Pkwy</td>
      <td>Plano</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">Jungle Crabs
          </label>
        </div>
      </td>
      <td>Robyn</td>
      <td>511 Fort Worth Dr</td>
      <td>Denton</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox">Big Plates Restaurants
          </label>
        </div>
      </td>
      <td>Justin</td>
      <td>1329 Centrury Blvd</td>
      <td>Irving</td>
      <td>TX</td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Modify <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit</a>
            </li>
            <li><a href="#">Duplicate</a>
            </li>
            <li><a href="#">Delete</a>
            </li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

这是我使用的JavaScript

<!-- jQuery Tablesorter -->
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.metadata.js"></script>
<script type="">
    $(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    );
</script>

<!-- Check all column header currently conflicting with the column sort -->
<!-- refer to site http://briancray.com/posts/check-all-jquery-javascript --> 
<script type="text/javascript">
    $(function () {
        $('.checkall').on('click', function () {
            $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
        });
    });
</script>

Answer 1

问题是复选框是列 header 的一部分，因此只要单击 header，复选框的单击处理程序就会运行。我想到的第一个解决方案是将复选框拉到它们自己的列中。这使复选框成为它们自己的可排序列，这很不幸，但是 .tablesorter 中有一个配置选项允许您忽略复选框字段：

$("#myTable").tablesorter({
    headers: {
      0: { sorter: false, parser: false }
    }
});

有关完整示例，请参阅 my fiddle。基本要点是：

<fieldset>
<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>
        <div class="checkbox">
          <input type="checkbox" class="checkall"/>
        </div>
      </th>
      <th>Business Name</th>
      <th>Contact Name</th>
  ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
            <input type="checkbox"/>
        </div>
      </td>
      <td>ABC Corporation</td>
      <td>Brandon</td>

  ...

Answer 2

另一种方法是将主复选框放在 table 之外，然后重新定位到 table 头部。

<div class="checkbox checkbox-boss">
    <label>
        <!-- checkall is not currentlly working -->
        <input type="checkbox" class="checkall"> Business Name
    </label>
</div>

<table id="myTable" class="tablesorter"> 
    <thead> 
        <tr> 
            <th>

            </th> 
            <th>Contact Name</th> 
            <th>Address</th> 
            <th>City</th> 
            <th>State</th>
            <th class="{sorter: false}"></th> 
        </tr> 
    </thead> 
    <tbody>

然后CSS

.checkbox-boss {
    position: relative;
    top: 42px;
    left: 12px;
    width: 100px;
    background: red;
}

Answer 3

我认为唯一缺少的就是停止传播点击：

$('.checkall').on('click', function (e) {
    e.stopPropagation();
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});

我的 table 排序器中的列排序覆盖了我的 table header 中的 checkall 复选框

The column sort in my tablesorter is overriding the checkall check box in my table header

javascript

checkbox

jquery

tablesorter