Angular Persistência de estado de grade

    A diretiva igxGridState permite que os desenvolvedores salvem e restaurem facilmente o estado da rede. Quando a IgxGridState diretiva é aplicada na grade, ela expõe os métodos e setState que os getState desenvolvedores podem usar para obter persistência de estado em qualquer cenário.

    Recursos suportados

    IgxGridState dá suporte ao salvamento e à restauração do estado dos seguintes recursos:

    • Sorting
    • Filtering
    • Advanced Filtering
    • Paging
    • Cell Selection
    • Row Selection
    • Column Selection
    • Row Pinning
    • Expansion
    • GroupBy
    • Columns

      • Multi column headers

      • Layout de várias linhas

      • Ordem das colunas

      • Propriedades de coluna definidas pela IColumnState interface.

      • Os modelos e funções de colunas são restaurados usando o código no nível do aplicativo, consulte a seção Restaurando colunas.

    Observação

    A IgxGridState diretiva não cuida de modelos. Vá para a seção Restaurando coluna para ver como restaurar modelos de coluna.

    Observação

    O Row Selection recurso requer que a primaryKey propriedade seja definida, para que possa ser armazenada/restaurada corretamente.

    Uso

    getState- Esse método retorna o estado da grade em uma string JSON serializada, para que os desenvolvedores possam simplesmente pegá-lo e salvá-lo em qualquer armazenamento de dados (banco de dados, nuvem, navegador localStorage etc.). O método aceita o primeiro parâmetro serialize opcional, que determina se getState retornará um IGridState objeto ou uma string JSON serializada. O desenvolvedor pode optar por obter apenas o estado de um determinado recurso/recursos, passando o nome do recurso ou uma matriz com nomes de recursos como um segundo argumento.

    // get all features` state in a serialized JSON string const gridState = state.getState(); // get an `IGridState` object, containing all features original state objects, as returned by the grid public API const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);

    setState- O setState método aceita a string ou IGridState objeto JSON serializado como argumento e restaurará o estado de cada recurso encontrado no objeto/string JSON.

    state.setState(gridState); state.setState(sortingFilteringStates)

    options- O options objeto implementa a IGridStateOptions interface, ou seja, para cada chave, que é o nome de um determinado recurso, há o valor booleano indicando se esse estado de recurso será rastreado. getState não colocará o estado desses recursos no valor retornado e setState o método não restaurará o estado para ele.

    public options = { cellSelection: false; sorting: false; }
    <igx-grid [igxGridState]="options"></igx-grid>

    As APIs de ponto único simples de usar permitem obter uma funcionalidade completa de persistência de estado em apenas algumas linhas de código. Copie e cole o código abaixo- ele salvará o estado da grade no objeto do navegador sessionStorage toda vez que o usuário sair da página atual. Sempre que o usuário retornar à página principal, o estado da grade será restaurado. Não há mais necessidade de configurar essas expressões complexas de filtragem e classificação avançadas todas as vezes para obter os dados desejados - faça isso uma vez e faça com que o código abaixo faça o resto para seus usuários:

    // app.component.ts @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public ngOnInit() { this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { this.saveGridState(); }); } public ngAfterViewInit() { this.restoreGridState(); } public saveGridState() { const state = this.state.getState() as string; window.sessionStorage.setItem('grid1-state', state); } public restoreGridState() { const state = window.sessionStorage.getItem('grid1-state'); this.state.setState(state); }

    Restaurando colunas

    Quando possível, a diretiva state reutilizará as colunas que já existem na grade ao restaurar o estado, em vez de criar novas instâncias de coluna. O único cenário em que uma nova instância será criada é quando a coluna (ou seus filhos no caso de grupos de colunas) não tiver nenhuma field propriedade, portanto, não há como identificar exclusivamente a coluna correspondente e reutilizá-la.

    Para tais cenários, o seguinte limitations é imposto. Nesse caso, a restauração de objetos complexos pode ser obtida com código no nível do aplicativo. Vamos mostrar como fazer isso para colunas modeladas:

    1. Defina uma variável de referência de modelo (no exemplo abaixo #activeTemplate) e atribua um manipulador de eventos para o columnInit evento:
    <igx-grid id="grid" #grid igxGridState (columnInit)="onColumnInit($event)"> <igx-column [field]="'IsActive'" header="IsActive"> <ng-template igxCell #activeTemplate let-column let-val="val"> <igx-checkbox [checked]="val"></igx-checkbox> </ng-template> </igx-column> ... </igx-grid>
    1. Consulte a visualização de modelo no componente usando @ViewChild ou @ViewChildren decorador. No manipulador de columnInit eventos, atribua o modelo à propriedade column bodyTemplate:
    @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef<any>; public onColumnInit(column: IgxColumnComponent) { if (column.field === 'IsActive') { column.bodyTemplate = this.activeTemplate; column.summaries = MySummary; column.filters = IgxNumberFilteringOperand.instance(); } }

    Demo

    Restaurando estratégias

    IgxGridState não persistirá nem operações remotas nem estratégias de dimensão personalizada (para obter mais informações, consulte Exemplo de operações remotas de grade) por padrão (consulte limitations). A restauração de qualquer um deles pode ser obtida com código no nível do aplicativo. O IgxGridState expõe um evento chamado stateParsed que pode ser usado para modificar adicionalmente o estado da grade antes de ser aplicado. Vamos mostrar como fazer isso:

    Observação

    stateParsed só é emitido quando estamos usando setState o argumento com string.

    • Defina a estratégia de classificação personalizada e as estratégias personalizadas de dimensão de coluna e linha:
    <igx-grid #grid [data]="data" [igxGridState]="options" [sortStrategy]="customStrategy" [height]="'500px'"> </igx-grid>
    @ViewChild(IgxGridStateDirective, { static: true }) public state!: IgxGridStateDirective; public customStrategy = NoopSortingStrategy.instance(); public options: IGridStateOptions = {...};
    • Restaurar o estado sessionStorage e aplicar as estratégias personalizadas é semelhante ao seguinte:
    public restoreState() { const state = window.sessionStorage.getItem('grid-state'); this.state.stateParsed.pipe(take(1)).subscribe(parsedState => { parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance()); }); this.state.setState(state as string); }

    Limitações

    Referências de API

    Recursos adicionais