custom-format 列 title/header 的工作示例？

Question

我有一个适用于列数据的格式化程序，使用列参数 formatter。将相同的格式化程序与列参数 titleformatter 一起使用，我得到了下面指出的错误。另外，我不明白为什么 title 参数文本中的 HTML 似乎不适用于 <b> ... </b> 但确实适用于其他东西（例如 <i> ... </i>）。一个工作的自定义格式化程序示例会有所帮助。（我在 Tabulator 文档中看不到这一点。）请参阅此蒙太奇，将列 header 和行 header 屏幕截图与行中的公共单元格文本---'bold' 组合在一起我觉得更大胆。

Cell text comparison screenshot montage

我尝试模拟一些已发布的示例代码，但我得到了与@dagroj 在他对@Oli Folkerd 的回答（对）关于 titleformatter 的评论中所报告的相同错误 - ——即tabulator.min.js:2 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.（在这里提到是因为我还没有资格在那里发表评论。）

Here is a rendering of my CPT, without the titleformatter.

对应的table构造函数：

  "columnVertAlign": "bottom",
  "height": "100%",
  "layout": "fitColumns",
  "columns": [
    {
      "title": "<i> absolute_T<--T (noisyAnd)</i>",
      "columns": [
        {
          "title": "<b> NotCorrAnd_EffectiveHyp</b>",
          "field": "label",
          "align": "right",
          "headerSort": false
        }
      ]
    },
    {
      "title": "NotB_EffectiveHyp",
      "columns": [
        {
          "title": "<b>T</B>",
          "field": "true",
          "align": "center",
          "headerSort": false
        },
        {
          "title": "<i>F</i>",
          "field": "false",
          "align": "center",
          "headerSort": false
        }
      ]
    },
    {
      "title": "<b> Belief </b>",
      "columns": [
        {
          "title": "odds",
          "field": "odds",
          "align": "center",
          "headerSort": false
        },
        {
          "title": "log<sub>2</sub> odds",
          "field": "log2odds",
          "align": "center",
          "headerSort": false
        }
      ]
    }
  ]
}

格式化程序：

function truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    if (cellValue == "T") {
    cellElement.style.backgroundColor = "#0000B3";
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = "bold";
    }
    else if (cellValue == "F") {
    cellElement.style.backgroundColor = "#B30000";
    cellElement.style.color = "#FFFFFF";
    cellElement.style.textAlign = "center";
    cellElement.style.fontWeight = "bold";
    }
    else cellElement.style.color = "#000000";
    return cell.getValue();
}

Answer 1

列 headers 默认样式为粗体，因此添加粗体或强标记不会使它们变得更粗。另一方面，您在标签

中混合使用了小写和大写 "b"

如果您收到该错误，则表示您的格式化程序未返回有效值，它必须是 string/number 或 DOM 节点类型的元素。

custom-format 列 title/header 的工作示例？

Working example to custom-format a column title/header?

tabulator