Angular Slickgrid 4.2.6：如何添加复合筛选操作符或实现SQL LIKE式自定义筛选？

一、给Compound Filter添加自定义操作符 #

要给复合筛选的操作符列表添加新选项，可通过扩展默认筛选操作符并在列定义中配置实现：

1. 定义自定义操作符
   创建包含操作符标识、显示文本和筛选逻辑的对象，比如添加一个"不包含"操作符：

   const customFilterOperators = [
     ...FilterOption, // 保留默认操作符
     {
       key: 'doesNotContain',
       label: 'Does Not Contain',
       filterFn: (value: any, filterValue: any) => {
         if (!value || !filterValue) return false;
         return !String(value).toLowerCase().includes(String(filterValue).toLowerCase());
       }
     }
   ];
   

2. 在列定义中配置
   在需要使用该操作符的列的filter属性里，指定options为自定义操作符数组：

   const columns: Column[] = [
     {
       id: 'title',
       name: 'Title',
       field: 'title',
       filterable: true,
       filter: {
         model: Filters.compound, // 指定复合筛选模型
         options: customFilterOperators // 注入自定义操作符
       }
     }
   ];
   

完成后，该列的复合筛选下拉菜单会新增你定义的操作符选项。

二、实现类似SQL LIKE的自定义筛选 #

要支持%作为通配符的LIKE筛选逻辑，可自定义筛选函数替换默认逻辑：

1. 创建LIKE筛选函数
   编写处理%通配符的逻辑，适配你需要的匹配规则：

   const likeFilterFn = (value: any, filterValue: any) => {
     if (!value || !filterValue) return false;
     const valStr = String(value).toLowerCase();
     let filterStr = String(filterValue).toLowerCase();
     
     // 将SQL LIKE的%替换为正则通配符，同时转义正则特殊字符
     filterStr = filterStr.replace(/%/g, '.*').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     // 若需严格匹配首尾（如你的示例需求），保留^和$；若需任意位置包含则移除
     const regex = new RegExp(`^${filterStr}$`);
     return regex.test(valStr);
   };
   

   注：按你的示例需求，输入Ti%001即可匹配以'Ti'开头、以'001'结尾的内容。

2. 绑定到列筛选
   将自定义函数添加为新操作符，或直接替换默认筛选逻辑：

   const columns: Column[] = [
     {
       id: 'title',
       name: 'Title',
       field: 'title',
       filterable: true,
       filter: {
         model: Filters.compound,
         options: [
           ...FilterOption,
           {
             key: 'like',
             label: 'LIKE (use % as wildcard)',
             filterFn: likeFilterFn
           }
         ]
       }
     }
   ];
   

   用户筛选时选择"LIKE"操作符，输入对应通配符格式的内容即可得到符合条件的结果。

内容的提问来源于stack exchange，提问作者Przemyslaw Widanka