如何格式化基于 Tabulator SELECT 的标题过滤器选项? [英] How can you format a Tabulator SELECT based header filters options?

问题描述

我们正在使用 Tabulator (4.8.3) 并且在一列上有一个基于 SELECT 的标题过滤器.除了我们试图为某些选择选项添加一些格式之外，一切都很好.它们以预期的格式显示在选择下拉列表中.但是，一旦做出选择，所选文本将显示为原始 html(未格式化).

We are using Tabulator (4.8.3) and have a SELECT based header filter on one column. It all works great except we are trying to add some formatting to some of the select options. They display in the select dropdown with the formatting as expected. However once a selection is made, the selected text displays with the raw html (not formatted).

JS fiddle 此处 说明了我们的意思.进行选择并查看选择文本中显示的格式(例如粗体标记和不间断空格).

A JS fiddle here shows what we mean. Make a selection and see the formatting displayed in the selection text (e.g. the bold tags and non-breaking spaces).

我们在 Tabulator 中寻找 headerFilterFormatter 或类似的东西，但找不到任何东西.我们还看到了这个帖子:如何创建多选标题过滤器在制表符中?，但编写所有这些只是为了清理选项文本显示似乎有点过分.

We looked for a headerFilterFormatter or something along those lines in Tabulator but could not find anything. We also saw this post: How do I create a multi-select header filter in tabulator?, but it seems like overkill to write all this just to sanitize option texts display.

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

We don't care id the selected text is formatted or not, we just don't want the html displaying in the value. We could possibly sanitize it externally every time a selection is made, but that does not seem like a great idea because it will tightly couple everything.

有谁知道是否有一种快速简便的方法可以在 Tabulator 中解决这个问题?

Does anyone know if there is a quick, easy way to address this in 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 数组中的选择列表值设置标签样式.选择编辑器使用输入元素来显示所选值，因此当您选择一个值时，它会将标签显示为文本.

The problem you are facing is you are trying to style the labels for the select list values in the values array. The select editor uses an input element to show the selected value, therefor when you are selecting a value it is showing the label as text.

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

The correct approach is to include the actual value in the label and then use the listItemFormatter to format the list as wanted, that way you store a plain text value against the label and display it as 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>";
          },
      }
},

这篇关于如何格式化基于 Tabulator SELECT 的标题过滤器选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！