如何格式化基于 header 过滤器选项的制表符 SELECT？

Question

我们正在使用 Tabulator (4.8.3) 并且在一列上有一个基于 SELECT 的 header 过滤器。这一切都很好，除了我们正在尝试为某些 select 选项添加一些格式。它们以预期的格式显示在 select 下拉列表中。但是，一旦创建了 selection，selected 文本将显示为原始 html（未格式化）。

一个JSfiddlehere说明了我们的意思。创建一个 selection 并查看 selection 文本中显示的格式（例如粗体标签和 non-breaking 空格）。

我们在 Tabulator 中寻找 headerFilterFormatter 或类似的东西，但找不到任何东西。我们还看到了这个 post：，但为了清理选项文本显示而编写所有这些内容似乎有些矫枉过正。

我们不关心 selected 文本是否格式化，我们只是不希望 html 显示在值中。每次制造 selection 时，我们都可以在外部对其进行消毒，但这似乎不是一个好主意，因为它会紧密耦合所有东西。

有谁知道在 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);

Answer 1

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

正确的方法是在标签中包含实际值，然后使用 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>";
          },
      }
},

如何格式化基于 header 过滤器选项的制表符 SELECT？

How can you format a Tabulator SELECT based header filters options?

javascript

tabulator