Как сохранить состояние ag grid gridOptions

Question

Я хочу сохранить состояние всех ag grid функций, таких как filter, sort, column order, tool panel pivoting и т. Д. Я знаю, что gridOptions содержит все необходимые состояния в gridOption.api и gridOptions.columnApi. Проблема заключается в том, что при маршрутизации к другим компонентам состояние теряется. Также клонирование gridOptions невозможно, так как все функции не клонируются. Ниже приведен план с двумя компонентами сетки и двумя ссылками маршрутизации -

https://plnkr.co/edit/E6nqZCHuUMA2nFQbNvpa?p=preview

Answer 1

Большинство моих ag-сеток настроены одинаково, поэтому я создал DataGrid.ts для инициализации настроек. В этом методе он подключается ко всем событиям, влияющим на макет, и я записываю состояние в локальном хранилище браузера.

Если сетке требуется другой набор свойств, просто установите его после получения GridOptions.

export class DataGrid {
    static GetDefaults(component: object, gridName: string, localStorage: LocalStorageService, showToolPanel: boolean = true, saveGridState: boolean = true): GridOptions {

        let gridOptions: GridOptions = null;

        const saveColumnState = () => {
            if (gridOptions === null || gridOptions === undefined || !saveGridState) {
                return;
            }

            const cs = gridOptions.columnApi.getColumnState();

            localStorage.setItem(gridName + '-GRID-COLUMNS', cs);
        };

        const saveColumnGroupState = () => {
            if (gridOptions === null || gridOptions === undefined || !saveGridState) {
                return;
            }

            localStorage.setItem(gridName + '-GRID-COLUMNS-GROUPS', gridOptions.columnApi.getColumnGroupState());
        };

        gridOptions = <GridOptions>{
            headerHeight: 24,
            rowHeight: 23,
            debug: false,
            showToolPanel: showToolPanel,
            enableFilter: true,
            enableSorting: true,
            enableColResize: true,
            animateRows: false,
            suppressMenuHide: false,
            pivotMode: false,
            pivotPanelShow: 'never',
            deltaRowDataMode: true,
            groupHideOpenParents: false,
            enableCellChangeFlash: true,
            rowGroupPanelShow: 'never',
            suppressCellSelection: true,
            suppressRowClickSelection: true,
            suppressDragLeaveHidesColumns: true,
            suppressPropertyNamesCheck: true,
            enableRangeSelection: true,
            rowSelection: 'multiple',
            groupSelectsChildren: true,
            groupSelectsFiltered: true,
            groupUseEntireRow: false,
            suppressLoadingOverlay: true,
            suppressNoRowsOverlay: true,
            toolPanelSuppressValues: true,
            toolPanelSuppressPivots: true,
            toolPanelSuppressPivotMode: true,
            toolPanelSuppressSideButtons: false,
            toolPanelSuppressColumnFilter: true,
            toolPanelSuppressColumnSelectAll: true,
            toolPanelSuppressColumnExpandAll: true,
            context: {
                componentParent: component,
                loading: true
            },
            onSortChanged: (event: SortChangedEvent) => {
                localStorage.setItem(gridName + '-GRID-SORT', event.api.getSortModel());
            },
            onColumnResized: () => saveColumnState(),
            onColumnGroupOpened: () => saveColumnGroupState(),
            onColumnMoved: () => saveColumnState(),
            onColumnPinned: () => saveColumnState(),
            onColumnVisible: () => saveColumnState(),
            onColumnPivotChanged: () => saveColumnState(),
            onColumnRowGroupChanged: () => {
                saveColumnState();
                saveColumnGroupState();
            },
            onGridReady: (event: GridReadyEvent) => {
                const sortState = localStorage.getItem(gridName + '-GRID-SORT');
                const colState = localStorage.getItem(gridName + '-GRID-COLUMNS');
                const colGrpState = localStorage.getItem(gridName + '-GRID-COLUMNS-GROUPS');

                if (sortState !== null && event.api !== null) {
                    event.api.setSortModel(sortState);
                }

                if (colState !== null) {
                    event.columnApi.setColumnState(colState);
                }

                if (colGrpState !== null) {
                    event.columnApi.setColumnGroupState(colGrpState);
                }

                gridOptions.onColumnEverythingChanged = (everythingEvent: ColumnEverythingChangedEvent) => {
                    if (gridOptions.context.loading) {
                        gridOptions.context.loading = false;

                        return;
                    }

                    localStorage.removeItem(gridName + '-GRID-COLUMNS');
                };

                gridOptions.api.showToolPanel(false);
            }
        };

        gridOptions.rowData = <any>[];

        return gridOptions;
    }
}

Тогда в вашем угловом компоненте назовите это так. LocalStorageService - это просто служба, которую я написал, чтобы использовать хранилище браузера (сессионное и локальное)

private setupDataGrid(): void {
    this.gridOptions = DataGrid.GetDefaults(this, 'LINEITEMS', this.localStorage);

    this.gridOptions.getRowNodeId = (data: any) => {
        return data.LineItemId;
    };

    this.gridOptions.columnDefs = <ColDef[]>[{ col defs go here }];

    // now just just use this.gridOptions like you normally would in your component
}

Answer 2

попробуй вот этот : 18.0.0 Столбцы - ColumnState должен иметь строгую типизацию
Added strong typing for ColumnState object used in api.getColumnState() / api.setColumnState()