我找到了一种使用以下代码向表中添加过滤器的简单方法:
$('#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>
答案 0 :(得分:0)
我认为基本方法是使用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();
}
});
});