如何设置类似于父行的嵌套制表符表(嵌套在单元格中)的样式?

问题描述 投票:0回答:1
css nested background grid tabulator
1个回答
0
投票

这是一个技巧,您可以使用父行的索引来确定颜色。

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;
        },
    },
],
© www.soinside.com 2019 - 2024. All rights reserved.