我正在使用制表符在嵌套表中创建切换的嵌套表。
除一件事外，一切工作都很好。
关闭第二个嵌套表时，嵌套表的高度不会更新。
我尝试将holders对象的高度设置为自动，但没有用。
这是我的代码
var table1 = new Tabulator("#table1", {
height:"100%",
columnHeaderVertAlign:"bottom", //align header contents to bottom of cell
layout:"fitdataStreach",
selectable: true,
data:tabledata,
columns:[
{formatter:"handle", width:10, align:"center", headerSort:false, cellClick:function(e, row, formatterParams){
const id = row.getData().id;
$(".subTable"+id).toggle();table1.height = "100%";}
},
{title:"Job Name", field:"jobname", sorter:"string", headerFilter:"input"},
{title:"Source", field:"src", headerFilter:"input"},
{title:"Destination", field:"dst", headerFilter:"input"},
{//create column group
title:"Baseline",
columns:[
{title:"Status", field:"baselinestatus",formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value == "failed"){
return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
}else if(value == "running" || value == "complete"){
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}else if(value == "pending"){
return "<span style='color:orange; font-weight:bold;'>" + value + "</span>";
}else{
return value;
}
}
},
{title:"Duration", field:"baselinetime"},
{title:"Sent", field:"baselinesentshort"},
],
},
{//create column group
title:"Lst Sync",
columns:[
{title:"Status", field:"syncstatus", formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value == "failed"){
return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
}else if(value == "running" || value == "complete"){
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}else if(value == "pending"){
return "<span style='color:orange; font-weight:bold;'>" + value + "</span>";
}else if(value == "idle"){
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}else{
return value;
}
}
},
{title:"Next Schedule", field:"syncsched", formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value == "-" || value == "paused"){
return "<span style='color:orange; font-weight:bold;'>" + value + "</span>";
}else{
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}
}
},
{title:"Duration", field:"synctime"},
{title:"Sent", field:"syncsentshort"},
{title:"Count", field:"synccounter"},
],
},
{//create column group
title:"Last Verify",
columns:[
{title:"Status", field:"verifystatus", formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value == "failed" || value == "diff"){
return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
}else if(value == "running" || value == "complete" || value == "equal"){
return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
}else if(value == "pending"){
return "<span style='color:orange; font-weight:bold;'>" + value + "</span>";
}else{
return value;
}
}
},
{title:"Start Time", field:"verifystarttime"},
{title:"Ratio", field:"verifyratio"},
{title:"Count", field:"verifycounter"},
],
},
],
rowFormatter:function(row) {
//create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
const id = row.getData().id;
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 10px 10px 10px";
holderEl.style.borderTop = "1px solid #333";
holderEl.style.borderBotom = "1px solid #333";
holderEl.style.background = "#ddd";
holderEl.style.display = "none";
holderEl.setAttribute('class', "subTable" + id + "");
tableEl.style.border = "1px solid #333";
tableEl.style.display = "none";
tableEl.setAttribute('class', "subTable" + id + "");
holderEl.appendChild(tableEl);
row.getElement().appendChild(holderEl);
var subTable = new Tabulator(tableEl, {
layout:"fitColumns",
selectable: true,
columnHeaderVertAlign:"bottom", //align header contents to bottom of cell
//layout:"fitData",
data:row.getData().verboseDetails,
columns:[
{formatter:"handle", width:10, align:"center", headerSort:false, cellClick:function(e, row, formatterParams){
const id = row.getData().id;
$(".logTable"+id).toggle();table1.height = "100%";}
},
{title:"Phase", field:"phase"},
{title:"Start Time", field:"starttime", sorter:"datetime", sorterParams:{format:"YYYY-MM-DD hh:mm:ss",},},
{title:"End Time", field:"endtime"},
{title:"Duration", field:"duration"},
{title:"Scanned", field:"scanned"},
{title:"Reviewed", field:"reviewed"},
{title:"Copied", field:"copied"},
{title:"Modified", field:"modified"},
],
rowFormatter:function(row) {
//create and style holder elements
var holderEl1 = document.createElement("div");
var tableEl1 = document.createElement("div");
const id = row.getData().id;
holderEl1.style.boxSizing = "border-box";
holderEl1.style.padding = "10px 10px 10px 10px";
holderEl1.style.borderTop = "1px solid #333";
holderEl1.style.borderBotom = "1px solid #333";
holderEl1.style.background = "#ddd";
holderEl1.style.display = "none";
holderEl1.setAttribute('class', "logTable" + id + "");
tableEl1.style.border = "1px solid #333";
tableEl1.style.display = "none";
tableEl1.setAttribute('class', "logTable" + id + "");
holderEl1.appendChild(tableEl1);
row.getElement().appendChild(holderEl1);
var logTable = new Tabulator(tableEl1, {
layout:"fitColumns",
data:row.getData().logsdata,
columns:[
{title:"STDERR Content", field:"stderrlogcontent",formatter:"link", formatterParams:{ urlField: "stderrurl", target:"_blank",}, headerSort:false},
{title:"STDOUT Content", field:"stdoutlogcontent",formatter:"link", formatterParams:{ urlField: "stdouturl", target:"_blank",}, headerSort:false},
],
});
},
});
},
});
如果为tableData变量添加一些示例数据，那么我可以创建一个示例并为您进行测试。但是，我认为您的问题是您应该使用table.setHeight('100%')而不是table.height = 100%。然后，您可能还需要调用table.redraw()。
请参阅表调整大小部分以获取更多信息。http://tabulator.info/docs/4.6/layout#virtual-dom-redraw