我的表排序器中的列排序将覆盖表标题中的复选框

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

本文关键字：排序 标题 复选框 覆盖 我的      更新时间：2023-09-26

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

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

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

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

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

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

有关完整示例，请参阅我的小提琴。基本要点是：

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

另一种方法（尽管在语义上是非语义的）是将主复选框放置在表外部，然后在表头上重新定位。

<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;
}
相关文章：