如何使用 ag-grid CustomFilterComponent 构建查找搜索功能 [英] How to build a lookup search functin using ag-grid CustomFilterComponent

问题描述

我有这个例子:

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

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

which shows a table with its columns, what i need is building a search lookup function instead of the default filter function, so that:

如果输入全名michael，那么表格将被michael 过滤，或者如果我输入电话号码，那么michael 的名字将被michael 过滤.换句话说.

if typing the full name michael then the table will be filter by michael, OR if i type the phone number then the name of michael will be filtery by michael. in other word.

有一个映射数组:

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

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

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

so instead of the defaul search function i want that the search will be looked up in that mapping object.

推荐答案

我制作了 这个 StackBlitz 需要修改从我之前的例子 ng-网格过滤器.

I made this StackBlitz with the modifications needed from my previous example on ng-grid filters.

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

You need to redefine the function doesFilterPass(...) wich is executed once per row in the table to match your desired filter:

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 包含给定行的当前值.

As you can see the function retrieves all search tokens (separated by spaces) and match every one using the custom filter wich is delegated to the function customFilter(...). Note that the argument node contains the current value of the given row.

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

The filter function then retrieves the data that will be used in the filter for the current row and tries to match the filter word with any of the tokens.

注意数据数组内每个对象的key属性必须与app.component.ts中定义的列名一致:

Note that the key property in each object inside the data array must match the name of the column defined in app.component.ts:

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

理想情况下，数据数组应该由某些服务提供.通过这种方式，您可以过滤 tokens 属性中的每个标记.在这种情况下，该示例将同时过滤一个以上的标准，例如输入S 091".将匹配 Smith，您应该修改 customFilter 函数以限制过滤器每次只能使用一个参数.

Ideally the data array should be provided by some service. In this way you are able to filter for each token in the tokens property. In this case the example will filter for more than one criteria at the same time, for example the input "S 091" will match Smith, you should modify the customFilter function to restrict the filter to only one parameter each time.

这篇关于如何使用 ag-grid CustomFilterComponent 构建查找搜索功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！