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.

    Note

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

    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

    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

    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