Question

我正在使用jQuery-2.1.3版本，并将jQuery tablesorter应用于每个列标题的表。我的表也有复选框，我需要能够检查第一列中的所有复选框。我正在使用的函数正确检查，但也对表进行排序。我也无法取消清除，而是只是在升序/降序之间切换列。

以下是查看我的示例的链接：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

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

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

Answer 2

问题是该复选框是列标题的一部分，因此无论何时单击标题，复选框的单击处理程序都会运行。我头顶的第一个解决方案是将复选框拉入自己的列。这使得复选框成为自己的可排序列，这是不幸的，但.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 3

另一种方法是这样做，虽然在语义上是将主复选框放在桌子外面，然后重新定位在桌面上。

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

我的tablesorter中的列排序覆盖了表头中的checkall复选框

3 个答案: