[英]JQuery Datatables: How to add child row?
數據表是否使用CSS標記定義子行? 我有一個包含子行的HTML表。 我想將它們設置為數據表中的子行,以便它們在排序時與父行保持一致。 我找不到對將一行標記為子行的css類的引用。
我所能找到的只是JQuery row.child()函數,您可以在其中向該行添加子行,但是我對JQuery不太滿意,無法弄清楚如何在此處添加行。
請參閱此JSFiddle 。 (單擊“程序”進行排序,然后單擊列表圖標以展開/折疊子行)。
<table id="tprogram" class="table table-striped table-hover ">
<thead>
<tr>
<th class='icon_colunm no-sort'></th>
<th>Program</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1"></i>
</td>
<td class='name'>A</td>
</tr>
<tr class="collapse collapsed1">
<td class="text-right"> <i class="fa fa-minus"></i></td>
<td class='name'>a</td></tr>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed2"></i>
</td>
<td class='name'>B</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>a</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>b</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>c</td>
</tr>
</tbody>
$(document).ready(function() {
$('#tprogram').dataTable({
"bPaginate": true,
"bSort": true,
"bInfo": false,
"bFilter": true,
"bAutoWidth": false,
"LengthChange": false,
"iDisplayLength": 50,
});
$('#tprogram').on('click', '.fa-list-ul', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(*?*).show();
tr.addClass('shown');
}
});
});
我決定將自己的類插入父行,並使用row.add()函數通過一些JQuery手動添加子行。
$('.parentrow').closest('tr').each(function(){
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
row.child(childrows).show();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.