Использовать пользовательский фильтр для объектов в ag-grid - PullRequest
Новая
       6

Использовать пользовательский фильтр для объектов в ag-grid

0 голосов
/ 14 апреля 2020

У меня есть таблица ag-grid, и я передаю некоторые объекты в качестве данных. Я хочу добавить несколько пользовательских фильтров. Ниже у меня есть очень упрощенная версия моей проблемы.

У меня есть интерфейс 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. Я бы предположил, что это отсортирует таблицу в обратном порядке, но ничего не происходит, я просто получаю таблицу, как указано в rowData, и как только что-то записывается в поле фильтра, все записи фильтруются. Как упоминалось ранее, это упрощенная версия, но проблема та же.

1 Ответ

1 голос
/ 15 апреля 2020

все хорошо в вашем коде, но отсутствует только маленькая деталь, как показано ниже:

в вашей конструкции, установите сетку sortable с DefaultColDef объектом, подобным этому: 

this.defaultColDef = {
  sortable: true,
};

Отредактировано: добавьте эту часть в определение столбца: 

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

Здесь ссылка Plnkr решения на основе вашего кода:

Я надеюсь это решает вашу проблему. Если нет, пожалуйста, дайте мне знать.

...