在制表符中为可以接受多个值的选择字段创建标题过滤器 将数据存储为阵列将数据存储为字符串列表

如何解决在制表符中为可以接受多个值的选择字段创建标题过滤器 将数据存储为阵列将数据存储为字符串列表

对于以下情况，我希望获得有关如何在Tabulator中构造headerFilter的指导。将通过制表器显示的数据列之一是多选列。可以输入一个或多个值。例如，可以选择三种颜色（红色，绿色和蓝色），并且在一条记录中可以选择红色和绿色。

我在同一单元格中的每行上显示每个选择。

我创建了一个select headerFilter来过滤该字段，但是该过滤器适用于 entire 单元格值。我想创建一个仅包含单个值（红色，绿色和蓝色）的选择列表，如果我选择“红色”之类的过滤器值，则它将匹配包含红色作为选定值之一的任何单元格，例如一个单元格具有红色和绿色。我不想将其用作通配符或子字符串值，因为一个选择可能包含另一个文本，例如，如果我在列表中添加了“浅蓝色”颜色，则不想选择“蓝色”匹配那个。

这个答案似乎有两部分，每个单元（数组中）的数据存储方式以及过滤器逻辑。

解决方法

https://jsfiddle.net/0p6L4ya1/

我认为这是您要寻找的？ 我会使用带有数字标志的位掩码来跟踪它是否启用多种颜色（限制为32种颜色，我猜是javascript，也许是64 ??）

您可以在colors数组中添加“ lightblue”以获取新的匹配项，它将与left [Eight]匹配，因为8 = 1

const colors = ['red','green','blue','lightblue'];

,

有两种简单的方法可以做到这一点：

将数据存储为阵列

您可以通过将阵列中每一行的颜色数据存储来管理此问题，例如，假设它存储在行数据对象的colours属性中，示例行数据可能看起来像这样>

var rowdata = [
    {colours:["red,green"]}
]

然后，您可以定义选择编辑器，并使用 in 标题过滤器功能来检查值是否在数组中，因此该列的列定义可能有点像这样：

{title:"Colours",field:"colours",headerFilter:"select",headerFilterParams:{values:["red","green","blue"]},headerFilterFunction:"in"},

当您从红色，绿色或蓝色的列表中选择值时，它将过滤出具有colours属性的行，该行包含数组中的该字符串

将数据存储为字符串列表

您可以通过将每一行的颜色数据存储在一串用空格分隔的值中来进行管理，例如，假设此数据存储在行数据对象的colours属性中，则示例行数据可能看起来像像这样

var rowdata = [
    {colours:"red green"}
]

然后，您可以定义选择编辑器，并使用 关键字 标头过滤器功能检查该值是否在字符串列表中，因此该列的列定义可能会有点像这样：

{title:"Colours",headerFilterFunction:"keywords"},

从红色，绿色或蓝色的列表中选择值时，它将过滤具有colours属性的行，该行包含字符串列表中的该字符串