Jquery tablesorter - 选择父行时包括所有子行

Question

这似乎是一个足够简单的函数，但出于某种原因，我正在努力让它发挥作用。我有一个 HTML table 和 jquery table 排序器插件。每一行都有一个复选框作为第一列。默认情况下，所有子行都是隐藏的。当我 select 父行上的复选框时，我希望它也将该父行下的子行上的复选框标记为 selected。这是我的 HTML table：

<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
     <tr class="tablesorter-hasChildRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-hasChildRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
  </tbody>
 </table>

这是我的javascript。我到了警报起作用的地步，我现在遇到困难的部分是 selecting 这个父项下的所有子行（子行的数量会因父项而异）然后 select复选框。在其他区域，我使用了 prop('checked') 但我需要它进行切换，这样如果父级未选中，子级也将取消选中。

$(.rowSelector').change(function() {
    if ($(this).closest('tr').hasClass('tablesorter-hasChildRow')) {
        alert('Yay!');  //this part works
        $(this).nextAll('tr').each(function () {
            if ($(this).has('.tablesorter-childRow')) {
              $(this).find(input.rowSelector).toggleClass('selected');
             }
        });
   };
});

谁能告诉我哪里出错了？

Answer 1

这是工作代码：

$('.rowSelector').change(function() {
  $(this).closest('tr.tablesorter-hasChildRow').nextUntil('tr.tablesorter-hasChildRow').find('input.rowSelector').prop('checked', $(this).prop('checked'));
});

嗯，有点工作。理想情况下，当手动选择所有较低级别的刻度时，您仍然希望切换较高级别的刻度。

Answer 2

HTML 存在一些问题...确保在关闭行时使用 </tr>。 HTML 将创建两行，第一行是空的。

<tr>
<tr class="tablesorter-hasChildRow">

无论如何，我创建了 this demo，它执行@rtytgat 提到的所有必要的复选框确定：

设置父级将使所有子级具有相同的检查状态
具有选中和未选中组合的子行将使父行不确定。
如果所有子行都具有相同的状态，则父行设置为该状态。

$(function() {

  var parentClass = '.tablesorter-hasChildRow',
    rowSelector = '.rowSelector';

  // return parent + all children
  function getGroupRows($row) {
    var isParent = $row.hasClass(parentClass.slice(1)),
      $rows = $row.nextUntil(parentClass).add($row),
      $prev = $row.prevUntil(parentClass).add($row);
    return isParent ? $rows : $rows.add($prev).add($prev.prev());
  }

  $('table')
    .tablesorter({
      theme: 'blue'
    })
    .on('change', rowSelector, function() {
      var $rows, checked, len,
        isChecked = this.checked,
        $row = $(this).closest('tr'),
        $group = getGroupRows($row);
      if ($row.hasClass(parentClass.slice(1))) {
        // parent checked, now (un)check all children
        $group.find('.rowSelector').prop('checked', isChecked);
      } else {
        // child row (un)checked, now figure out what to do with the parent
        $rows = $group.filter('.tablesorter-childRow');
        checked = $rows.find(rowSelector + ':checked').length;
        len = isChecked ? checked : $rows.length - checked;
        if (len === $rows.length) {
          // all child rows are the same, set the parent to match
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: false,
            checked: isChecked
          });
        } else {
          // combo of checked & unchecked, make parent indeterminate
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: true,
            checked: false
          });
        }
      }
    });
});

Jquery tablesorter - 选择父行时包括所有子行

Jquery tablesorter - Include all child rows when selecting a parent row

jquery

each

tablesorter