我真的需要您帮助对齐子行列和父行列。我发现一个例子与我所做的完全一致,所以我没有把整个代码放在这里,因为我的公司有一个限制。所以我在这里给出了代码/示例可用的参考。 示例: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