这是一个技巧,您可以使用父行的索引来确定颜色。
columns:[
{title:"Id", field:"id"},
{title:"Parent", field:"parent"},
{title:"Children", field:"children",
formatter:function(cell, formatterParams, onRendered){
//create and style holder elements
let holderEl = document.createElement("div");
let tableEl = document.createElement("div");
holderEl.appendChild(tableEl);
// calculate parent row backgrount color
let backgroundColor = 'white';
if (cell.getRow().getIndex() % 2 == 0)
{backgroundColor = 'rgb(239, 239, 239)';}
let subTable = new Tabulator(tableEl, {
layout:"fitDataStretch",
headerVisible:false,
data:cell.getValue(),
columns:[
{title:"Child", field:"child"},
{title:"Age", field:"age"}
],
// set nested row background color
rowFormatter: function(row){
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = backgroundColor;
});
},
})
cell.getRow().normalizeHeight();
return holderEl;
},
},
],