jquery - 制表器中切换的第二级嵌套表的高度问题
问题描述
我正在使用制表符在嵌套表中创建一个切换嵌套表。
除了一件事,一切都很好。
当第二个嵌套表关闭时,嵌套表的高度不会更新。
我尝试将持有人对象的高度设置为自动,但它不起作用。
这是我的代码
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
推荐阅读
- php - php for循环数组长度
- azure - Azure 函数中 SSH 私钥和临时 SFTP 下载数据的位置
- ffmpeg - ffmpeg - 读取原始数据而不是转换为不同的格式
- google-app-engine - 尝试通过从应用引擎监控 api 来列出不同项目中的指标时出现 403 错误
- python - 我怎样才能最好地删除具有不同值的行分组在一个上,但即使它出现多个时间分组在一个值上,也要保持相同的值
- embedded - 通过直接写寄存器来正确使用ADC?
- c# - Panel onPaint 渲染伪影
- c - 为什么任意键盘输入会改变c,curses中的其他内存?
- flutter - Flutter - TextField 内的文本未垂直居中
- jmeter - 如何使用 JMeter 登录 Azure Active Directory 单点登录 (SSO) 与 Google Cloud (G Suite) 连接器的集成