0

我想在下面链接的屏幕片段中呈现一个表格。

所需渲染的模型（3 个变体，全部使用相同的格式化程序用于具有子标题“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; */
}
4

1 回答 1

0

为了让它与您的标题一起使用，我们需要调整一些位。

您将需要更改您的 css 选择器以使用.tabulator-col类，并且您需要和一些!important标志来覆盖内置样式：

.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来决定如何然后将类应用于正确的元素

于 2018-11-06T19:48:07.720 回答