【发布时间】：2018-03-06 11:30:34
【问题描述】：
在将子行列与父行列对齐时，我真的需要您的帮助。我发现一个例子与我所做的完全匹配，所以我没有把整个代码放在这里，因为我的公司有限制。因此，我在此处提供代码/示例可用的参考。 示例：JQuery Datatable with parent child relationship in same dataset. How to display it as parent child rows in the table?
我附上了对齐的屏幕截图。任何人都可以请帮忙。 注意：我尝试放置一些 CSS html 表格单元格间距/单元格填充，但它没有锻炼。
var g_dataFull = [];
/* Formatting function for row details - modify as you need */
function format ( d ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" width="100%">';
var dataChild = [];
var hasChildren = false;
$.each(g_dataFull, function(){
if(this.parent === d.name){
html +=
'<tr><td>' + $('<div>').text(this.name).html() + '</td>' +
'<td>' + $('<div>').text(this.position).html() + '</td>' +
'<td>' + $('<div>').text(this.office).html() +'</td>' +
'<td>' + $('<div>').text(this.salary).html() + '</td></tr>';
hasChildren = true;
}
});
if(!hasChildren){
html += '<tr><td>There are no items in this view.</td></tr>';
}
html += '</table>';
return html;
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"url": "https://api.myjson.com/bins/3mbye",
"dataSrc": function(d){
g_dataFull = d.data;
var dataParent = []
$.each(d.data, function(){
if(this.parent === "null"){
dataParent.push(this);
}
});
return dataParent;
}
},
"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');
}
} );
} );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>【问题讨论】：
-
不要偷懒，把示例代码自己贴在这里。
-
对不起，你能把问题解释清楚一点吗？我的理解是你问的是如何让孩子在点击绿色的加号按钮时直接和家长排队？
-
@jack：添加的代码，实际上是从另一个帖子中复制的代码。
-
@MichaelPlatt：问题如图所示，子行中的列未正确对齐父列。子列向右对齐。
标签： jquery html css datatable datatables