自定义列标题/标题格式的示例

Question

我有一个格式化程序，它使用列参数formatter处理列数据。使用与列参数titleformatter相同的格式化程序，我得到了以下错误。此外，我不明白为什么title参数文本中的HTML似乎不适用于<b> ... </b>，但适用于其他内容(例如<i> ... </i>(。一个有效的自定义格式化程序示例会有所帮助

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

我试着模仿一些发布的示例代码，但我得到了与@dagroj在评论@Oli Folkerd关于titleformatter的答案(即tabulator.min.js:2 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(时报告的错误相同的错误(在这里提到这一点，因为我还没有资格在那里发表评论。(

这是我的CPT的渲染图，没有标题格式化程序。

对应的表构造函数：

"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

默认情况下，列标题的样式为粗体，因此添加粗体或强标记不会使它们变得更大胆。另一方面，你在标签中使用小写和大写"b"的混合

如果出现该错误，则表示格式化程序没有返回有效值，该值必须是字符串/数字或Node类型的DOM元素。