请求提供Webix excelFilter基于列格式化文本创建过滤的示例

默认的Webix excelFilter会直接使用单元格的原始值生成过滤选项，当原始值不同但格式化后显示文本相同时，过滤器列表就会出现重复项。要解决这个问题，我们可以自定义过滤器逻辑，基于格式化后的显示文本生成去重的过滤选项，同时确保过滤时能正确匹配对应的原始值。

完整示例代码 #

webix.ready(function(){
  // 模拟数据源：原始值不同，但格式化后显示相同文本
  const data = [
    { id:1, status:0, amount:100 },
    { id:2, status:1, amount:200 },
    { id:3, status:0, amount:150 },
    { id:4, status:2, amount:300 },
    { id:5, status:1, amount:250 }
  ];

  // 统一的格式化函数（用于单元格显示和过滤器选项生成）
  function formatStatus(value){
    switch(value){
      case 0: return "待处理";
      case 1: return "已完成";
      case 2: return "已取消";
      default: return "未知";
    }
  }

  webix.ui({
    view:"datatable",
    container:"box",
    columns:[
      { id:"id", header:"ID", width:80 },
      { 
        id:"status", 
        header:"状态", 
        width:120,
        // 单元格显示格式化文本
        template:formatStatus,
        // 自定义excelFilter配置
        filter:{
          content:"excelFilter",
          // 自定义过滤选项生成逻辑
          getValueList:function(){
            // 获取所有行的原始值，转换为格式化文本后去重
            const values = this.getColumnValues("status");
            const formattedValues = values.map(formatStatus);
            // 去重处理
            const uniqueFormatted = [...new Set(formattedValues)];
            // 返回过滤器需要的选项结构
            return uniqueFormatted.map(text => ({ value:text, id:text }));
          },
          // 自定义过滤逻辑：根据选中的格式化文本匹配原始值
          compare:function(value, filter, obj){
            const formatted = formatStatus(value);
            return filter.includes(formatted);
          }
        }
      },
      { id:"amount", header:"金额", width:100 }
    ],
    data:data
  });
});

关键部分说明 #

1. 统一格式化函数：定义formatStatus函数，确保单元格显示和过滤器使用的格式化规则一致，避免出现匹配偏差。
2. 自定义getValueList：
   • 通过getColumnValues获取列的所有原始值
   • 将原始值转换为格式化文本后，用Set去重
   • 返回符合excelFilter要求的选项数组（每个选项包含value和id）
3. 自定义compare逻辑：当用户选择过滤选项时，将单元格的原始值格式化为文本，再判断是否在选中的过滤列表中，实现基于显示文本的过滤。

注意事项 #

如果存在不同原始值格式化后文本相同的场景，这个逻辑会自动将这些原始值归为同一过滤选项，符合业务预期；如果需要区分这类情况，需调整格式化规则，确保每个原始值对应唯一的显示文本。

内容的提问来源于stack exchange，提问作者Siti Olamide