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

大多数我的农业网格都设置相同，所以我创建了一个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

尝试this one： 18.0.0列-ColumnState应该具有强类型
Added strong typing for ColumnState object used in api.getColumnState() / api.setColumnState()

如何保留AG网格gridOptions的状态

2 个答案: