tabulator - 自定义格式列标题/标题的工作示例？

问题描述

我有一个适用于列数据的格式化程序，使用 column parameter formatter。使用与 column parameter 相同的格式化程序titleformatter，我得到下面提到的错误。另外，我不明白为什么title参数文本中的 HTML 似乎不适用于其他东西，<b> ... </b>但确实适用于其他东西（例如，<i> ... </i>一个有效的自定义格式化程序示例会有所帮助。（我在 Tabulator 文档中没有看到这一点。）请参阅此蒙太奇将列标题和行标题屏幕截图与常见的单元格文本相结合——行中的“粗体”对我来说看起来更大胆。

单元格文字对比截图蒙太奇

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

这是我的 CPT 的渲染，没有 titleformatter。

对应的表构造函数：

  "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();
}

标签： tabulator

tabulator - 自定义格式列标题/标题的工作示例？

问题描述

解决方案

推荐阅读