Question

我想按照下面链接的屏幕片段中的方式呈现表格。

Mock-up of rendering desired (3 variants, all using the same formatter for columns with sub-headings 'T', 'F')

感谢Oli Folkerd的帮助，我有一个正在运行的版本，如下面的屏幕截图所示。

这成为一个毫无疑问的例子，也许是一个有用的例子。

标题规范：

          {title:"T", field:"true", align:"center",
           headerSort:false,
           titleFormatter:title_truthFormatter,
           formatter:childTFormatter}

格式化程序：

function cell_truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    if (cellValue == "T") {
    cellElement.style.backgroundColor = "#0000B3"; // Excel: 48, 84, 150 --> #305496
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = "bold";
    }
    else if (cellValue == "F") {
    cellElement.style.backgroundColor ="#B30000"; // Excel: 192, 0, 0 --> #c00000
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = 700; // "bold"; // Same...
    }
    else cellElement.style.color = "#000000";
    return cell.getValue();
}

function title_truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    var classToAdd;
    if (cellValue == "T") classToAdd = "truth-true";
    else classToAdd = "truth-false";

    setTimeout(function(){                   
       cell.getElement().parentNode.parentNode.classList.add(classToAdd);
    },100)

    return cell.getValue();
}

function childTFormatter(cell, formatterParams, onRendered) { // #8ea9db
    var cellElement = cell.getElement();
    cellElement.style.backgroundColor = "#8ea9db";
    return cell.getValue();
}

function childFFormatter(cell, formatterParams, onRendered) { // #ff7578
    var cellElement = cell.getElement();
    cellElement.style.backgroundColor = "#ff7578";
    cellElement.style.fontStyle = "italic";
    return cell.getValue();
}

CSS：

.tabulator .tabulator-header .tabulator-col .truth-true {
    background-color: #0000B3 !important;
    color: #FFFFFF;
    text-align: center !important;
    padding-top: 8px !important;
    /* No-op, in tabulator header: font-weight: bold; */
}

.tabulator .tabulator-header .tabulator-col .truth-false {
    background-color: #B30000 !important;
    color: #FFFFFF;
    text-align: center !important;
    padding-top: 8px !important;
    font-style: italic !important;
    /* No-op, in tabulator header: font-weight: bold; */
}

Answer 1

要使其与标题配合使用，我们需要进行一些调整。

您将需要更改css选择器以使用 .tabulator-col 类，并且需要添加一些 ！important 。 em> 标志来覆盖内置样式：

.tabulator-col.truth-true { background-color: #0000B3 !important; color: #FFFFFF; text-align: center !important; }

然后，在标题格式化程序中，您需要从单元格上的元素中选择几个节点以获取完整的标头元素，而不仅仅是文本。同样由于父级在技术上还不存在，您需要等待几毫秒的时间才能将其添加到DOM

function truthFormatter(cell, formatterParams, onRendered) { //DO YOUR LOGIC TO DECIDE WHAT CLASS SHOULD BE APPLIED setTimeout(function(){ cell.getElement().parentNode.parentNode.classList.add("truth-true"); },100) return cell.getValue(); }

这时，对单元格和标头使用单独的格式化程序功能可能更简单，因为它们需要执行不同的操作，尽管您也可以检查单元格元素上的类以查看其是否具有类 tabulator-cell 决定如何将类应用于正确的元素

如何使用titleformatter ---使用CSS类的示例？

1 个答案: