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

Question

我有 agGrid，其中包含使用了 refData 属性的列。它显示为 "Yes" 或 "No" 但基础值为“1”或“0”。我想按数据过滤列，但按 "Yes" 或 "No" 过滤时没有给出任何结果。但是，当我放置基础数据即 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);            
    }
}

当按 "No" 过滤时，它不返回任何行：-

当按 0 过滤时返回行：-

如何自定义过滤，以便在按 "Yes" 或 "No" 过滤时开始返回行？请帮忙解决这个问题。

Answer 1

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

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

Answer 2

我会在像这样的列定义中使用 filterValueGetter -

 filterValueGetter: this.customfilterValueGetter

这里是customfilterValueGetter

的简单实现

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

根据文档 -

filterValueGetter(params)
Function or expression. Gets the value for filtering purposes.

Plunkr here。查看零售价列

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

How to filter rows in agGrid based on display value?

filtering

ag-grid

angular

ag-grid-angular