向包含父/子行的表添加过滤器

Question

我找到了一种非常简单的方法，可以使用以下代码向表中添加过滤器：

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    $('.searchable').hide();
    $('.searchable').filter(function () {
        return rex.test($(this).text());
    }).show();
});

截至目前，过滤器仅查看具有“可搜索”类的行。此类由所有父行组成。所有子行都有一个类“tablesorter-childRow”。如何让我的过滤器功能与父行和子行一起使用。如果该父级通过过滤器，那么子行也应该如此。如果父行有子行显示在过滤器之前，则子行应该显示在过滤器之后，反之亦然。

这是生成的一些 html：

<tr class="searchable danger tablesorter-hasChildRow" role="row" style="border-top-style: solid;">
   <td style="text-align: center;">
      <input id="items_0__SuggestedQty" name="items[0].SuggestedQty" type="hidden" value="28">
      <input class="suggested" id="items_0__UseSuggestedQty" name="items[0].UseSuggestedQty" style="vertical-align: text-bottom;float:right;" type="checkbox" value="true"><input name="items[0].UseSuggestedQty" type="hidden" value="false">
      <label for="Qty_28__" style="margin-top:6px;margin-right: 5px;float:right">Qty(28) </label>
   </td>
   <td style="text-align: center;">
      <input id="items_0__Quantity" name="items[0].Quantity" type="hidden" value="1000">
      <input checked="checked" class="override" id="items_0__Override" name="items[0].Override" style="vertical-align: text-bottom;float:right;" type="checkbox" value="true"><input name="items[0].Override" type="hidden" value="false">
      <label for="Qty_1000__" style="margin-top:6px;margin-right: 5px;float:right;">Qty(1000) </label>
   </td>
   <td>
      <input id="items_0__LineNo" name="items[0].LineNo" type="hidden" value="3">
      3
   </td>
   <td>
      <input id="items_0__PartNo" name="items[0].PartNo" type="hidden" value="06756275">
      06756275
   </td>
   <td>
      <input id="items_0__Description" name="items[0].Description" type="hidden" value="ROLLER-.187 X 1.250 LG">
      ROLLER-.187 X 1.250 LG
   </td>
   <td>
      <input id="items_0__Cost" name="items[0].Cost" type="hidden" value="0.48">
      0.48
   </td>
   <td>
      <input id="items_0__ExtendedCost" name="items[0].ExtendedCost" type="hidden" value="">
   </td>
   <td>
      <input id="items_0__NetAvailability" name="items[0].NetAvailability" type="hidden" value="256">
      256
   </td>
   <td>
      <input id="items_0__AdjustedNetAvailability" name="items[0].AdjustedNetAvailability" type="hidden" value="228">
      228
   </td>
   <td>
      <input id="items_0__UsageRate" name="items[0].UsageRate" type="hidden" value="71.25">
      71.25
   </td>
   <td>
      <input id="items_0__PriorYearUsage" name="items[0].PriorYearUsage" type="hidden" value="1774">
      1774
   </td>
   <td>
      <input id="items_0__UsageRatio" name="items[0].UsageRatio" type="hidden" value="3.59">
      3.59
   </td>
</tr>
<tr style="" class="tablesorter-childRow danger" role="row">
   <td style="vertical-align: middle; font-weight: bold; text-align: right;">
      Reason
   </td>
   <td colspan="12">
      <select class="form-control" id="items_0__ReasonCode" name="items[0].ReasonCode" style="max-width: none; width: auto">
         <option value="1">Emerging Demand – New item with demand expected to grow</option>
         <option value="2">Quantity Pack Item – Must buy factory minimum</option>
         <option value="3">Bulk Buy – Large purchase for distribution</option>
         <option value="4">Lead Time – Longer than typical lead time</option>
         <option value="5">Service Request – Service Dept. requested item for stock</option>
         <option selected="selected" value="6">Sales Request – Sales Dept. requesting item for stock</option>
         <option value="7"></option>
      </select>
   </td>
</tr>
<tr style="border-bottom-style: solid;" class="tablesorter-childRow danger" role="row">
   <td style="vertical-align: middle; font-weight: bold; text-align: right;">
      Comments
   </td>
   <td colspan="12">
      <textarea class="form-control" cols="20" id="items_0__Comments" name="items[0].Comments" rows="2">testing</textarea>
   </td>
</tr>

Answer 1

我认为基本方法是使用nextUntil 和prevUntil。这是一个可能无法按原样工作的示例，但演示了基本思想：

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    var $rows = $('.searchable, .tablesorter-childRow').hide();       
    var $filtered = $rows.filter(function () {
        return rex.test($(this).text());
    });

    $filtered.each(function($match){
      // parent row, show all the children until the next parent row is reached
      if($match.hasClass('.searchable')){
         $match.nextUntil('.tablesorter-childRow', '.searchable').show();
      } else {
         // child row, this will need work, show subsequent children,
         // show previous children, show previous parent
         var show = [];
         show.push($match.nextUntil('.tablesorter-childRow', '.searchable'));
         show.push($match.prevUntil('.tablesorter-childRow', '.searchable'));
         show.push($match.prev('.searchable'));

         $(show).show();
      }
    });
});