我正在使用数据表和 Prime ui。目前我有一张表，您可以向下钻取行。然后可以向下钻取展开的表的每一行，但随后第二层消失，只剩下顶层和第三层。我认为这与第二级和第三级都有孩子的身份有关，但是当我尝试将 childChild 用于孙子时，它会出错。
我希望第三层是显示在两个表结构旁边的表。我有一个调用mastertable.js中的方法的文件，它基本上按顺序传递三个表，主表，子表和孙表。
这是 mastertable.js 的代码
// Datatable /////////////
var superIndex = 0;
var superRowIndex = 0;
var rowAncnum = 0;
var revisionTable = null;
var masterTableGet = {
fetchTable: function(dataTable, childDtObj, childChildTable) {
var masterTableObj = {
table: dataTable,
child: childDtObj,
childChild: childChildTable,
type: 'child',
init: function() {
tableGet.fetchTable(masterTableObj.table, function(retTable) {
if(retTable.hasChild) {
masterTableObj.setAsParent(retTable);
}
});
},
setAsParent: function(tableObj) {
// Remove sorting class from mastertable -- A hack :)
var bod = '<th tabindex="0" class="details-control remove-sorting" style="width: 20%;" rowspan="1" colspan="1"></th>';
var sel = '#' + tableObj.id + ' th.remove-sorting';
$(sel).replaceWith(bod);
// Removes the sorting class again anytime Columns button is used.
$('#' + tableObj.id).on('column-visibility.dt', function ( e, settings, column, state ) {
var bod = '<th tabindex="0" class="details-control remove-sorting" style="width: 20%;" rowspan="1" colspan="1"></th>';
var sel = '#' + tableObj.id + ' th.remove-sorting';
$(sel).replaceWith(bod);
});
if(tableObj.type == 'master') {
console.log("MASTER");
$('#' + tableObj.id + ' tbody').on('click', 'td.details-control.master', function () {
var tr = $(this).closest('tr');
var row = tableObj.table.row( tr );
if ( tr.hasClass('selected') ) {
tr.removeClass('selected');
}
else {
tr.removeClass('selected');
tr.addClass('selected');
}
if ( row.child.isShown() ) {
// This row is already open - close it
masterTableObj.destroyChild(row, tableObj);
tr.removeClass('shown');
}
else {
// Open this row
masterTableObj.createChild(row, tableObj);
tr.addClass('shown');
}
});
}
if(tableObj.type == 'child') {
console.log("Child-----------------------" + tableObj.id);
$('#' + tableObj.id + ' tbody').on('click', 'td.details-control.child', function () {
var tr = $(this).closest('tr');
var row = tableObj.table.row( tr );
if ( tr.hasClass('selected') ) {
tr.removeClass('selected');
}
else {
tr.removeClass('selected');
tr.addClass('selected');
}
if ( row.child.isShown() ) {
// This row is already open - close it
masterTableObj.destroyChild(row, tableObj);
tr.removeClass('shown');
}
else {
// Open this row
masterTableObj.createChild(row, tableObj);
tr.addClass('shown');
}
});
}
if(tableObj.type == 'childChild') {
console.log("CHILD CHILD");
$('#' + tableObj.id + ' tbody').on('click', 'td.details-control.childChild', function () {
var tr = $(this).closest('tr');
var row = tableObj.table.row( tr );
if ( tr.hasClass('selected') ) {
tr.removeClass('selected');
}
else {
tr.removeClass('selected');
tr.addClass('selected');
}
if ( row.child.isShown() ) {
// This row is already open - close it
masterTableObj.destroyChild(row, tableObj);
tr.removeClass('shown');
}
else {
// Open this row
masterTableObj.createChild(row, tableObj);
tr.addClass('shown');
}
});
}
},
createChild: function(row, tableObj) {
console.log("ROW:::")
console.log(row.data());
var childTable = document.getElementsByClassName("panel-childTable");
if (childTable.length > 0) {
masterTableObj.type = "childChild";
tableObj.type = "child";
console.log("HERE");
} else {
masterTableObj.type = "child";
tableObj.type = "master";
console.log("FAILED");
}
// This is the table we'll convert into a DataTable
console.log(tableObj.id);
// var obj = row.data();
// var rowIndex = row.index();
// var index = obj[Object.keys(obj)[0]];
var obj;
var rowIndex;
var index;
if (row.data() === undefined) {
obj = new Object(3333);
} else {
obj = row.data();
superIndex = obj[Object.keys(obj)[0]];
superRowIndex = row.index();
}
rowIndex = row.index();
index = obj[Object.keys(obj)[0]];
// if(tableObj.type == 'master') {
// masterTableObj.type = 'child';
// } else {
// masterTableObj.type = 'childChild';
// }
// 1. This is added as a placeholder for the child table that is put in <tr>.
var table = $('<table class="display" id="' + masterTableObj.type + "_" + index + "_" + rowIndex + '" width="100%"/>');
row.child( table ).show();
// Must set/change Ajax URL of Child Table
// Use the row to get the id, then create
// the new child table.
// 2. Table replaces the above placeholder in the setDom() function.
if(tableObj.type == 'master') {
var datatableObj = masterTableObj.child;
var version = '?verid=' + index; // This query needs to be put in the table object.
datatableObj.ajaxurl = datatableObj.ajaxbaseurl + version;
datatableObj.id = datatableObj.type + "_" + index + "_" + rowIndex;
datatableObj.filter = row.data().path;
datatableObj.hasButtons = true;
console.log("CHILD!!!!!!!!");
console.log(datatableObj);
tableGet.fetchTable(datatableObj, function(retTable) {
masterTableObj.setAsParent(retTable);
console.log(retTable);
revisionTable = retTable;
});
}
if(tableObj.type == 'child') {
console.log("SUPER INDEX: " + superIndex);
var datatableObj = masterTableObj.childChild;
console.log(tableObj.id);
console.log(masterTableObj.childChild.id);
var version = '?verid=' + superIndex + "&ancnum=" + rowAncnum; // This query needs to be put in the table object.
datatableObj.ajaxurl = datatableObj.ajaxbaseurl + version;
datatableObj.id = "child" + "_" + superIndex + "_" + superRowIndex;
datatableObj.filter = undefined;
datatableObj.hasButtons = true;
console.log(datatableObj);
// masterTableObj = revisionTable;
tableGet.fetchTable(datatableObj);
}
// Add a type of dialog that will be loaded for user manager.
if(tableObj.type == 'dialog') {
}
},
destroyChild: function(row, tableObj) {
// Think about removing the table and the Dialog.... Take out the other place where dialog is removed in table.
console.log("DESTROYING HERE FOR: " + tableObj.id);
var table = $("#" + tableObj.id, row.child());
table.detach();
table.DataTable().destroy();
// And then hide the row
row.child.hide();
}
}
//// Starts Object running!! ////
masterTableObj.init();
}
};
//////////////////////////////////////////////////////////////////
//This is the shim for portability across clientside and NodeJS
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
var $ = require('jquery')
module.exports = {
masterTableGet: masterTableGet
}
}
else {
window.masterTableGet = masterTableGet;
}
我已经到了这样的地步，你钻取主人然后钻孩子，孙子作为主人的孩子出现。基本上你有两个层次，顶部是主人，第二层次是孙子。如何显示左边的主子和右边的孙子？