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.

    Supported Features

    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.

    Note

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

    Usage

    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);
}

    Restoring columns

    When possible the state directive will reuses the columns that already exists on the grid when restoring the state, instead of creating new column instances. The only scenario where a new instance will be created is when the column (or its children in case of a column groups) have no field property so there's no way to uniquely identify the matching column and re-use it.

    For such scenarios, the following limitations are imposed. In that case restoring complex objects can be achieved with code on application level. Let's show how to do this for templated columns:

    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

    Restoring Strategies

    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:

    Note

    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);
}

    Limitations

    API References

    Additional Resources