我使用datatables.net创建了父子行表。单击一行时，将显示子行。但我希望孩子总是打开没有任何行上的点击事件。有人可以建议我如何实现它
这是我的代码
var ecumTbl= S$("#EncumbranceSummaryTable").DataTable(
{
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
if(api.column(3).data().length)
{
total = api
.column( 1 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
}
else
{
total =0
};
// Total over this page
if(api.column(3).data().length)
{
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column(2).footer() ).html(
'Contract Total'
);
$( api.column(3).footer() ).html(
formatCurrency(pageTotal)
);
}
else{
pageTotal=0;
};
},
"aoColumns": [
{
"sTitle": "", "sWidth": "10%"
},
{ "sTitle": "Sub total for PO #", "mData": "PO_Num", "sWidth": "15%" },
{ "sTitle": "Encumbrance","mData": "Encumbrance", "sWidth": "35%" },
{ "sTitle": "Release","mData": "Release", "sWidth": "45%" },
{ "sTitle": "Paid","mData": "Paid", "sWidth": "45%" },
{ "sTitle": "Balance","mData": "Balance", "sWidth": "45%" },
],
"paging": false,
"ordering": false,
"data": Customers,
"info": false,
"bJQueryUI": true,
'sDom': 't',
"columnDefs": [{
"targets": [0],
"bSearchable": false,
"bSortable": false,
"className": 'details-control',
"mData": null,
"defaultContent": '',
}]
});
//On row click show child table
$('#EncumbranceSummaryTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = ecumTbl.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( format(row.data()) ).show();
tr.addClass('shown');
var innerPOTbl= S$("#innerPOTable").DataTable(
{
"bJQueryUI": true,
"aoColumns": [
{ "sTitle": "FY", "mData": "fiscalYrs", "sWidth": "20%" },
{ "sTitle": "Ln","mData": "ln", "sWidth": "15%" },
{ "sTitle": "F/F/A","mData": "ffa", "sWidth": "30%" },
{ "sTitle": "Project ID", "mData": "projectID", "sWidth": "25%" },
{ "sTitle": "Source Type","mData": "sourceType", "sWidth": "30%" },
{ "sTitle": "Encumbrance","mData": "encumbrance", "sWidth": "35%" },
{ "sTitle": "Released","mData": "released", "sWidth": "35%" },
{ "sTitle": "Paid","mData": "paid", "sWidth": "35%" },
{ "sTitle": "Balance","mData": "balance", "sWidth": "35%" },
],
"sDom": 'lfrtip',
"data":PurchaseOrderList,
"paging": false,
"ordering": false,
"info": false,
"bJQueryUI": false,
});
}
});
答案 0 :(得分：1)
<强>解
添加此代码以显示所有子行：
$("#EncumbranceSummaryTable").DataTable().rows().every( function () {
this.child(format(this.data())).show();
this.nodes().to$().addClass('shown');
// Child table initialization
var innerPOTbl = $(".child-table", this.nodes().to$()).DataTable(
// ... skipped
);
} );
有关详细信息，请参阅row().child()。
<强>样本
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table_data_json = '[{"name":"Tiger Nixon","position":"System Architect","salary":"$320,800","start_date":"2011/04/25","office":"Edinburgh","extn":"5421"},{"name":"Garrett Winters","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422"},{"name":"Ashton Cox","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"}]';
var table = $('#example').DataTable( {
"data": JSON.parse(table_data_json),
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', 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( format(row.data()) ).show();
tr.addClass('shown');
}
} );
// Show all child nodes
$("#example").DataTable().rows().every( function () {
this.child(format(this.data())).show();
this.nodes().to$().addClass('shown');
});
} );td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
答案 1 :(得分：0)
另一种使用DataTables＆＃34; draw＆＃34;的解决方案事件。我觉得这个解决方案更舒服，因为它是Datatables对象的一部分，放在＆＃34; draw＆＃34; event确保它仅在表完全初始化之后才触发，然后在每个绘制事件上执行。
var table = $('#sample')
.DataTable({
// your table configuration...
})
.on('draw.dt', function () {
table.rows().every(function () {
this.child(format(this.data())).show();
this.nodes().to$().addClass('shown');
// this next line removes the padding from the TD in the child row
// In my case this gives a more uniform appearance of the data
this.child().find('td:first-of-type').addClass('child-container')
});
});
// this is my format function for the child data
// do as you need for your case
function format(d) {
// `d` is the original data object for the row
return '<table class="row-detail">' +
'<tr>' +
'<td title="State">' + d.rState + '</td>' +
'<td title="Comment">' + d.rComment + '</td>' +
'<td title="Category">' + d.rCategory + '</td>' +
'</tr>' +
'</table>';
}
这是子TD及其表格的样式类。
<style>
.child-container{
padding: 0 !important;
}
table.row-detail {
border-collapse: collapse;
width: 100%;
}
table.row-detail td {
padding: 5px 10px !important;
border-right: 1px solid #ddd;
}
</style>