在制表符中为可以接受多个值的选择字段创建 Header 过滤器
Creating a Header Filter in Tabulator for Choice Field that Can Accept Multiple Values
我希望获得有关如何在 Tabulator 中针对以下情况构造 headerFilter 的一些指导。将通过 Tabulator 显示的数据列之一是 multi-choice 列。可以输入一个或多个值。例如，有 3 种颜色（红色、绿色和蓝色）可供选择，并且在一条记录中红色和绿色都可以 selected.
我在同一个单元格中单独显示每个选项。
我创建了一个 select headerFilter 来过滤此字段，但该过滤器适用于 整个 单元格值。我想创建一个仅包含单个值（红色、绿色和蓝色）的选择列表，如果我 select 一个像“红色”这样的过滤器值，那么它将匹配任何包含红色的单元格作为 selected 值，例如同时具有红色和绿色的单元格。我不想将其用作通配符或子字符串值，因为一个选择可能包含另一个选择的文本，就像我将颜色“浅蓝色”添加到列表中一样，我不想 select ing "blue" 来匹配它。
这个答案似乎有 2 个部分，每个单元格的数据存储方式（在数组中？）和过滤逻辑。
https://jsfiddle.net/0p6L4ya1/
我想这就是您要找的？
我会使用带有数字标志的位掩码来跟踪它是打开还是关闭多种颜色（32 种颜色的限制，我猜是 javascript，也许是 64 ??)
您可以将 'lightblue' 添加到颜色数组中以获得新的匹配项，它将匹配左 [Eight]，因为 8 = 1<<4
const colors = ['red','green','blue','lightblue'];
有两种简单的方法可以做到这一点：
将数据存储为数组
您可以通过将每一行的颜色数据存储在一个数组中来管理它，例如假设它存储在 colours 属性 行数据 object 中，示例行数据可能如下所示
var rowdata = [
{colours:["red, green"]}
]
然后您可以定义您的 select 编辑器，并使用 in header 过滤器功能来检查该值在数组中，因此该列的列定义可能有点像这样：
{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"in"},
当您从红色、绿色或蓝色列表中 select 您的值时，它将过滤具有 colours 属性 且数组中包含该字符串的行
将数据存储为字符串列表
您可以通过将每一行的颜色数据存储在一个 space 分离值的字符串中来管理它，例如假设它存储在 colours 属性 中行数据 object，示例行数据可能如下所示
var rowdata = [
{colours:"red green"}
]
然后您可以定义 select 编辑器，并使用 keywords header 过滤器功能来检查该值在字符串列表中，因此该列的列定义可能有点像这样：
{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"keywords"},
当您 select 从红色、绿色或蓝色列表中选择您的值时，它将过滤 colours 属性 包含字符串列表中该字符串的行
我希望获得有关如何在 Tabulator 中针对以下情况构造 headerFilter 的一些指导。将通过 Tabulator 显示的数据列之一是 multi-choice 列。可以输入一个或多个值。例如，有 3 种颜色（红色、绿色和蓝色）可供选择，并且在一条记录中红色和绿色都可以 selected.
我在同一个单元格中单独显示每个选项。
我创建了一个 select headerFilter 来过滤此字段，但该过滤器适用于 整个 单元格值。我想创建一个仅包含单个值（红色、绿色和蓝色）的选择列表，如果我 select 一个像“红色”这样的过滤器值，那么它将匹配任何包含红色的单元格作为 selected 值，例如同时具有红色和绿色的单元格。我不想将其用作通配符或子字符串值，因为一个选择可能包含另一个选择的文本，就像我将颜色“浅蓝色”添加到列表中一样，我不想 select ing "blue" 来匹配它。
这个答案似乎有 2 个部分，每个单元格的数据存储方式（在数组中？）和过滤逻辑。
https://jsfiddle.net/0p6L4ya1/
我想这就是您要找的？ 我会使用带有数字标志的位掩码来跟踪它是打开还是关闭多种颜色（32 种颜色的限制，我猜是 javascript，也许是 64 ??)
您可以将 'lightblue' 添加到颜色数组中以获得新的匹配项，它将匹配左 [Eight]，因为 8 = 1<<4
const colors = ['red','green','blue','lightblue'];
有两种简单的方法可以做到这一点：
将数据存储为数组
您可以通过将每一行的颜色数据存储在一个数组中来管理它，例如假设它存储在 colours 属性 行数据 object 中，示例行数据可能如下所示
var rowdata = [
{colours:["red, green"]}
]
然后您可以定义您的 select 编辑器，并使用 in header 过滤器功能来检查该值在数组中，因此该列的列定义可能有点像这样：
{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"in"},
当您从红色、绿色或蓝色列表中 select 您的值时，它将过滤具有 colours 属性 且数组中包含该字符串的行
将数据存储为字符串列表
您可以通过将每一行的颜色数据存储在一个 space 分离值的字符串中来管理它，例如假设它存储在 colours 属性 中行数据 object，示例行数据可能如下所示
var rowdata = [
{colours:"red green"}
]
然后您可以定义 select 编辑器，并使用 keywords header 过滤器功能来检查该值在字符串列表中，因此该列的列定义可能有点像这样：
{title:"Colours", field:"colours", headerFilter:"select", headerFilterParams:{values:["red", "green", "blue"]}, headerFilterFunction:"keywords"},
当您 select 从红色、绿色或蓝色列表中选择您的值时，它将过滤 colours 属性 包含字符串列表中该字符串的行