如何根据显示值过滤 agGrid 中的行？答案

【问题标题】：How to filter rows in agGrid based on display value?如何根据显示值过滤 agGrid 中的行？
【发布时间】：2020-09-30 02:33:44
【问题描述】：

我有 agGrid，其中包含使用 refData 属性的列。它显示为“是”或“否”，但基础值为“1”或“0”。我想按数据过滤列，但按“是”或“否”过滤时没有给出任何结果。但是，当我放置基础数据（即 1 或 0）时，过滤器开始工作。

HTML 文件

<ag-grid-angular class="ag-theme-balham" 
            [rowData]="categoryRowData" [columnDefs]="categoryColDef" [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
       </ag-grid-angular>

TS 文件

export class CategoryComponent implements OnInit{
    private domLayout;
    private objCategoryEditor = {};
    categoryColDef ;

    constructor()
    {
        this.getCategoryMapping();
        this.createCategoryColDefinition();
    }

    ngOnInit() {        
        this.domLayout = "autoHeight";
    }

    onGridReady(params: any) {            
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();                                     
    }

    createCategoryColDefinition() {
        this.categoryColDef = [            
        {
            headerName: 'Is Subcategory', field: 'IsSubcategoryText', resizable: true,filter:true,
            editable: function (params: any) {
                return true;
            },
            cellEditor: "agSelectCellEditor",
            cellEditorParams: {
                values: this.extractValues(this.objCategoryEditor),
            },
            refData: this.objCategoryEditor,            
        }
    ]}

    getCategoryMapping()
    {
        this.objCategoryEditor["0"] = "No";
        this.objCategoryEditor["1"] = "Yes";    
        this.createCategoryColDefinition();                     
    }

    extractValues(mappings) {    
        return Object.keys(mappings);            
    }
}

当按“否”过滤时，它不返回任何行：-

当按 0 过滤时，它返回行：-

如何自定义过滤，以便在按“是”或“否”过滤时开始返回行？请帮忙。

【问题讨论】：

我认为使用 agGrid-community 版本无法实现。这将通过 agSetColumnFilter 实现，它是 agGrid-Enterprise 的一部分并且是收费的。

标签： angular filtering ag-grid ag-grid-angular

【解决方案1】：

我会在列定义中使用filterValueGetter，类似这样 -

 filterValueGetter: this.customfilterValueGetter

这里是customfilterValueGetter的简单实现

 customfilterValueGetter(params) {
    if(params.data) {
      return this.objCategoryEditor[params.data.IsSubcategoryText];
    }
 }

根据文档 -

filterValueGetter(参数)
函数或表达式。获取用于过滤目的的值。

Plunkr here。查看零售价列

【讨论】：

非常感谢。我正在寻找属性“filterValueGetter”。你的回答对我有帮助。
谢谢！！在我的情况下效果很好，特别是因为缺少有关此方法的文档。

【解决方案2】：

不要使用 0 和 1 创建对象键，而是使用如下所示的 yes 和 No 属性本身，这将帮助您解决此问题

   getCategoryMapping()
    {
        this.objCategoryEditor["No"] = "No";
        this.objCategoryEditor["Yes"] = "Yes";    
        this.createCategoryColDefinition();                     
    }

【讨论】：

不，我不能。这些值来自 DB。即使对于其他网格，一些 Guid 也即将到来并绑定到 agGrid。