在同一数据集中具有父子关系的 JQuery 数据表.如何将其显示为表中的父子行? [英] JQuery Datatable with parent child relationship in same dataset. How to display it as parent child rows in the table?
本文介绍了在同一数据集中具有父子关系的 JQuery 数据表.如何将其显示为表中的父子行?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个嵌套的数据集.数据集中很少有记录是同一数据集中其他记录的子级.parent 为 null 的记录没有任何子元素，但具有与 is 关联的值的记录将在同一数据集中指示其父元素.我如何在具有父子关系的 jQuery 数据表中表示这一点.
我刚刚操作了通用数据集来解释我的要求.在下面的数据集示例中，Record with Name - Tiger Nixon 有两个子记录，它们是同一数据集中的单独记录.
一个如何实现的例子会有很大帮助.
<代码>{数据": [{"name": "老虎尼克松",父母":空"，"position": "系统架构师","salary": "$320,800","开始日期": "2011/04/25","office": "爱丁堡",分机":5421"},{"name": "加勒特温特斯","parent": "老虎尼克松","position": "会计师","salary": "$170,750","开始日期": "2011/07/25","office": "东京",分机":8422"},{"name": "阿什顿考克斯",父母":空"，"position": "初级技术作者","salary": "$86,000","开始日期": "2009/01/12","office": "旧金山",分机":1562"},{"name": "塞德里克·凯利","parent": "老虎尼克松","position": "高级 Javascript 开发人员","salary": "$433,060","开始日期": "2012/03/29","office": "爱丁堡",分机":6224"}]} 解决方案
解决方案
您可以使用 ajax.dataSrc 来存储原始数据g_dataFull 中的数据并过滤并返回包含父级的数据，仅显示在主表中.
当子行在 format() 函数中时，您需要迭代完整数据集 g_dataFull 并找到并显示包含子行的行 (this.parent === d.name).
演示
var g_dataFull = [];/* 行详细信息的格式化功能 - 根据需要修改 */函数格式 ( d ) {var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"宽度="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>'+ $('').text(this.position).html() + ''+'<td>'+ $('').text(this.office).html() +''+'<td>'+ $('<div>').text(this.salary).html() + '</td></tr>';hasChildren = true;}});如果(！hasChildren){html += '<tr><td>此视图中没有项目.</td></tr>';}html += '</table>';返回html；}$(document).ready(function() {var table = $('#example').DataTable( {阿贾克斯":{"url": "https://api.myjson.com/bins/3mbye",数据源":函数(d){g_dataFull = d.data;var dataParent = []$.each(d.data, function(){if(this.parent === "null"){dataParent.push(this);}});返回数据父级；}},列": [{"className": '细节控制',可订购":假，数据":空，默认内容":''},{数据":名称"}，{数据":位置"}，{数据":办公室"}，{数据":工资"}],顺序":[[1, 'asc']]});//添加打开和关闭细节的事件监听器$('#example tbody').on('click', 'td.details-control', function () {var tr = $(this).closest('tr');var row = table.row( tr );如果(row.child.isShown()){//该行已经打开 - 关闭它row.child.hide();tr.removeClass('显示');}别的 {//打开这一行row.child( 格式(row.data()) ).show();tr.addClass('显示');}});});td.details-control {背景:url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') 无重复中心；光标:指针；}tr.shown td.details-control {背景: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') 无重复中心；}
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="样式表"/><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"><头><tr><th></th><th>姓名</th><th>位置</th><th>办公室</th><th>薪水</th></tr></thead><脚><tr><th></th><th>姓名</th><th>位置</th><th>办公室</th><th>薪水</th></tr></tfoot></table>
I have a nested dataset. Few records in the dataset are child to other records in the same dataset. The records that have parent as null do not have any child elements, but ones that has value associated with is will indicate its parent in same dataset. How do I represent this in jQuery Datatable with Parent Child relationship.
I have just manipulated the common dataset to explain my requirements. As in the dataset example below, Record with Name - Tiger Nixon have two child records, which are as seperate records in the same dataset.
An example of how to achieve would be of great help.
{
"data": [
{
"name": "Tiger Nixon",
"parent": "null",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"parent": "Tiger Nixon",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"parent": "null",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"parent": "Tiger Nixon",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
}
]
}
解决方案
SOLUTION
You can use ajax.dataSrc to store original data in g_dataFull and filter and return data containing parents only to be displayed in the main table.
When child row is being in format() function you need to iterate full dataset g_dataFull and find and display rows containing children (this.parent === d.name).
DEMO
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>
这篇关于在同一数据集中具有父子关系的 JQuery 数据表.如何将其显示为表中的父子行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
