如何格式化基于Tabulator SELECT的标题过滤器选项？

如何解决如何格式化基于Tabulator SELECT的标题过滤器选项？

我们正在使用制表器（4.8.3），并且在一列上具有基于SELECT的标题过滤器。除了我们试图向某些选择选项添加某种格式外，所有这些都很好用。它们显示在选择下拉列表中，并具有预期的格式。但是，一旦做出选择，所选的文本就会显示原始的html（未格式化）。

JS小提琴here显示了我们的意思。进行选择，然后查看选择文本中显示的格式（例如，粗体标签和不间断空格）。

我们在Tabulator中寻找了headerFilterFormatter或类似内容，但找不到任何内容。我们还看到了这篇文章： How do I create a multi-select header filter in tabulator?，但写这一切只是为了清理选项文本显示，似乎有些过头。

我们不在乎ID是否为所选文本设置格式，我们只是不希望html显示在值中。每次进行选择时，我们都可以在外部对其进行消毒，但这似乎不是一个好主意，因为它会紧密耦合所有内容。

有人知道在Tabulator中是否有一种快速，简便的方法来解决这个问题？

var table = new Tabulator("#table",{
  layout: "fitDataFill",columns: [{
      title: "ID",field: "id"
    },{
      title: "Topic",field: "topic",width: 120,headerFilterPlaceholder: "-- Select --",headerFilter:"select",headerFilterParams: {values: paramLookup}
    },],});

var tableData = [{
    id: 1001,topic: "1.0",},{
    id: 1002,topic: "1.1",{
    id: 1003,topic: "2.0",{
    id: 1004,topic: "3.0",];

function paramLookup(cell){
  return {
    "1.0":"<b>1.0</b>","1.1":"&nbsp;&nbsp;1.1","2.0":"<b>2.0</b>","3.0":"<b>3.0</b>",};
}

table.setData(tableData);

解决方法

您面临的问题是您正在尝试为values数组中的选择列表值的标签设置样式。选择编辑器使用输入元素显示选定的值，因此，当您选择一个值时，它将标签显示为文本。

正确的方法是在标签中包含实际值，然后使用 listItemFormatter 格式化所需的列表格式，这样您就可以将纯文本值存储在标签并将其显示为html：

{
      title: "Topic",field: "topic",width: 120,headerFilterPlaceholder: "-- Select --",headerFilter:"select",headerFilterParams: {
          values: [1.0,1.1,1.2],listItemFormatter:function(value,title){ 
              return "<b>" + title + "</b>";
          },}
},