如何使用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.

推荐答案

我制作了需要对我的示例进行修改，网格过滤器.

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屋！