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

Question

我想呈现 table 如下面链接的屏幕片段。

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

感谢 Oli Folkerd 的帮助，我有一个可用的版本，如下面链接的屏幕片段所示。

Table as correctly rendered

这成为一个 non-question，也许是一个有用的例子。

Header 规格：

          {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

为了让它与您的 header 一起使用，我们需要进行一些调整。

您需要更改 css select 或者使用 。tabulator-col class 并且您需要一些 !important 标志来覆盖内置样式：

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

然后在您的标题格式化程序中，您需要 select 从单元格上的元素开始的几个节点以获得完整的 header 元素，而不仅仅是文本。还因为 parent 在技术上还不存在，您需要等待几毫秒才能将其添加到 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();
}

此时，对单元格和 header 使用单独的格式化函数可能更简单，因为它们需要做不同的事情，尽管您也可以检查 classes单元格元素，看看它是否有 class tabulator-cell 决定如何应用 class到正确的元素

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

How to use titleformatter --- example using CSS classes?

tabulator

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