如何使用 ag-grid 自定义过滤器组件构建查找搜索功能

Posted 2023-03-28

【中文标题】如何使用 ag-grid 自定义过滤器组件构建查找搜索功能

【英文标题】：How to build a lookup search functin using ag-grid CustomFilterComponent

【发布时间】：2021-04-01 06:59:56

【问题描述】：

我有这个例子：

https://embed.plnkr.co/iUrXZcG14lzhpD5Ofa3z/

它显示了一个带有列的表，我需要的是构建一个搜索查找函数而不是默认的过滤函数，这样：

如果输入全名 michael，则表格将按 michael 过滤，或者如果我输入电话号码，则 michael 的名字将按 michael 过滤。换句话说。

有一个映射数组：

    
key: michael,
value: michael,
tokens:
    michael,
    mich,
    ael,
    +0912312321
    
    ,
    

key:    natalie,
  value:  natalie,
tokens
natalie
    lie
    ,
    +091212

    

所以我希望在该映射对象中查找搜索，而不是默认搜索功能。

【参考方案1】：

首先，你的映射数组格式不正确，修改如下：

  [
    key: 'michael',
    value: 'michael',
    tokens: ['michael', 'mich', 'ael', '+0912312321'],
  ,
  
    key: 'natalie',
    value: 'natalie',
    tokens: ['natalie', 'lie', '+091212'],
  ]

您需要做的是创建自己的自定义搜索过滤器。这很容易使用 ag-Grid，请参阅 here。使用您的自定义过滤器，您需要为每一行决定是否应该使用映射数组进行过滤。

在您的自定义过滤器组件中的 doesFilterPass 函数中，您的逻辑应如下所示：

PersonFilter.prototype.doesFilterPass = function (params) 
  // make sure each word passes separately, ie search for firstname, lastname
  var valueGetter = this.valueGetter;

  console.log(valueGetter(params))

  let acceptableFilterValues = [];
  const filterDataForValue = filterData.find(x => x.value == valueGetter(params).toLowerCase());


  if (!filterDataForValue)
   
    return false; 
   
  
  const tokensForFilterValue = filterDataForValue.tokens;

  return tokensForFilterValue.indexOf(this.filterText) > -1;
;

看看this Plunker 演示。单击名称列上的过滤器图标。

【参考方案2】：

我在 ng-grid 过滤器上使用 from my previous example 所需的修改制作了 this StackBlitz。

您需要重新定义函数doesFilterPass(...)，该函数在表中的每行执行一次以匹配您所需的过滤器：

customFilter(filterWord: string, node: RowNode): boolean 
  let data = [
     key: 'Smith', tokens: ['Smith', 'ael', '+0912312321'] ,
     key: 'Robert', tokens: ['Robert', 'rob', '457891187'] 
  ];

  let rowData = null;

  data.forEach((record => 
    if (record.key === this.valueGetter(node).toString()) 
      rowData = record;
    
  ));

  return rowData.tokens.some((token) => 
    return token.toLowerCase().indexOf(filterWord) >= 0;
  );


doesFilterPass(params: IDoesFilterPassParams): boolean 
  return this.text.toLowerCase()
    .split(" ")
    .every((filterWord) => 
      return this.customFilter(filterWord, params.node);
    );

如您所见，该函数检索所有搜索标记（由空格分隔）并使用委托给函数customFilter(...) 的自定义过滤器匹配每个标记。请注意，参数node 包含给定行的当前值。

过滤器函数然后检索将在当前行的过滤器中使用的数据，并尝试将过滤器词与任何标记匹配。

请注意，数据数组内每个对象中的key属性必须与app.component.ts中定义的列名匹配：

rowData = [
   name: 'Smith' ,
   name: 'Robert' 
];

理想情况下，数据数组应该由某些服务提供。通过这种方式，您可以过滤 tokens 属性中的每个令牌。在这种情况下，该示例将同时过滤多个条件，例如输入“S 091”将匹配 Smith，您应该修改 customFilter 函数以将过滤器限制为每次只能过滤一个参数。