-1
我真的需要您幫助對齊子行列和父行列。我發現一個例子與我所做的完全一致，所以我沒有把整個代碼放在這裏，因爲我的公司有一個限制。所以我在這裏給出了代碼/示例可用的參考。 示例：JQuery Datatable with parent child relationship in same dataset. How to display it as parent child rows in the table?JQuery與父列匹配的Datatable子行分配機器人
我附上了對齊的屏幕截圖。任何人都可以請幫忙。 注：我試着把一些CSS html表格cellspacing/cellpadding，但它沒有鍛鍊。 
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
對不起，你能更清楚地解釋一下這個問題嗎？我的理解是，當您點擊綠色加號按鈕時，您是在問如何讓孩子們直接與父母聯繫？ –
@jack：添加的代碼，實際上是從另一個帖子複製代碼。 – SKumar