对 ag-grid 中的对象使用自定义过滤器

Question

我有一个 ag-grid table 并且我将一些对象作为数据传递。我想添加一些自定义过滤器。下面是我的问题的一个非常简化的版本。

我有一个接口 VersionInfo 代表我传递给网格的对象。

export interface VersionInfo {
    version: number;
   // more fields here...
}

然后我指定网格的架构并添加一些数据：

columnDefs = [
    {
      headerName: 'Version', 
      field: 'version', 
      filter: 'agNumberColumnFilter',
      comparator: (a, b) => b.version - a.version,
      cellRenderer: (params: ICellRendererParams) => {
        return `Custom rendering ${params.data.version.version}`;
      }
    }
];

rowData = [
    { version: {version: 3} },
    { version: {version: 5} },
    { version: {version: 8} }
];

HTML 看起来像这样：

<ag-grid-angular 
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [columnDefs]="columnDefs">
</ag-grid-angular>

除 comparator 外，一切正常。我假设它会以相反的顺序对 table 进行排序，但没有发生任何事情，我只是得到 rowData 中指定的 table 并且一旦将某些内容写入过滤器字段 all条目被过滤。如前所述，这是一个简化版本，但问题是一样的。

Answer 1

您的代码中的一切都很好，但缺少只是一些小细节，如下所示：

在您的构造中，使用 DefaultColDef 对象设置网格 sortable，如下所示：

this.defaultColDef = {
  sortable: true,
};

已编辑：在您的列定义中添加此部分：

...
headerName: 'version',
valueGetter: (params: any) => {
  return 'Custom rendering ' + params.data.version.version;
},
...

此处 solution Plnkr link 基于您的代码：

希望能解决您的问题。如果没有，请告诉我。

对 ag-grid 中的对象使用自定义过滤器

Use custom filter for objects in ag-grid

ag-grid

angular

ag-grid-angular