Ag-grid не предлагает постоянство состояния сетки из коробки. На прошлой неделе мне пришлось реализовать это в одном из моих Angular-проектов, так как я не нашел ни одного примера с использованием Angular, то решил написать эту статью.
В этом примере я начну с простого примера из учебных пособий «Начало работы», предоставленных AG-Grid.
Также вы можете проверить это демо.
Во-первых, вам нужно активировать фильтрацию для ваших столбцов:
columnDefs = [
{ field: ‘make’, filter: true },
{ field: ‘model’, filter: true },
{ field: ‘price’, filter: true }
];
Мой подход к достижению этой цели заключается в сохранении конфигурации фильтрации в локальном хранилище каждый раз при изменении параметров фильтрации. Для этого мы можем использовать событие filterChanged. Если вы хотите узнать больше об этом, вы можете проверить документацию страницы событий: https://www.ag-grid.com/javascript-grid/grid-events/#reference-sortFilter.
<ag-grid-angular style="width: 600px; height: 550px;" class="ag-theme-alpine" [rowData]="rowData"[columnDefs]="columnDefs" (firstDataRendered)="onFirstDataRendered($event)" (filterChanged)="onFilterChanged($event)"> </ag-grid-angular>
И метод сохранения конфигурации фильтрации:
onFilterChanged(params) {
localStorage.setItem('ag-grid-persistane-filtering', JSON.stringify(params.api.getFilterModel()));
}
Мы можем использовать «getFilterModel», чтобы получить текущую конфигурацию фильтрации, и нам нужно использовать JSON.stringify, чтобы преобразовать объект модели в текстовое представление.
Теперь при каждой загрузке приложения нам нужно загружать конфигурацию фильтрации. Для этого мы можем использовать событие «firstDataRendered». Это событие запускается при отображении первой строки. Здесь мы можем получить модель конфигурации фильтрации из локального хранилища и применить ее.
onFirstDataRendered(params): void {
const filterModel = localStorage.getItem('ag-grid-persistane-filtering');
params.api.setFilterModel(JSON.parse(filterModel));
}
Надеюсь, поможет!
