Web Components Persistencia del estado de la cuadrícula pivotante

    La persistencia de estado Ignite UI for Web Components en Web Components Pivot Grid permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se IgcGridState aplica en el Web Components IgcPivotGridComponent, expone los GetState​ ​GetStateAsString métodos y ApplyState​ ​ApplyStateFromString que los desarrolladores pueden usar para lograr la persistencia de estado en cualquier escenario.

    Funciones admitidas

    IgcGridState permite guardar y restaurar el estado de las siguientes características:

    Uso

    El getState método devuelve el estado de la cuadrícula en un IgcGridStateInfo objeto, que contiene toda la información de estado. Es posible que se requieran pasos adicionales para guardarlo.

    Devuelve GetStateAsString una cadena JSON serializada, por lo que los desarrolladores pueden tomarla y guardarla en cualquier almacenamiento de datos (base de datos, nube, navegador localStorage, etc.).

    El desarrollador puede optar por obtener solo el estado de una determinada característica o características, pasando una matriz con nombres de características como argumento. La matriz vacía dará como resultado el uso de las opciones de estado predeterminadas.

    <igc-pivot-grid id="grid">
    <igc-grid-state id="gridState"></igc-grid-state>
</igc-pivot-grid>
html
    var gridState = document.getElementById('gridState') as IgcGridStateComponent;

// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgcGridStateInfo = gridState.getState();

// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString();

// get the sorting and filtering expressions
const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']);
typescript

    ApplyState- El método acepta un IgcGridStateInfo objeto como argumento y restaurará el estado de cada característica que se encuentre en el objeto o en las características especificadas como segundo argumento.

    ApplyStateFromString- El método acepta una cadena JSON serializada como argumento y restaurará el estado de cada característica que se encuentre en la cadena JSON o en las características especificadas como segundo argumento.

    gridState.applyState(gridState);
gridState.applyStateFromString(gridStateString);
gridState.applyState(sortingFilteringStates)
typescript

    El Options objeto implementa la IgcGridStateOptions interfaz, es decir, para cada clave, que es el nombre de una determinada característica, existe el valor booleano que indica si se realizará un seguimiento del estado de esta característica. GetState / GetStateAsString methods no colocará el estado de estas características en el valor devuelto y ApplyState / ApplyStateFromString methods no restaurará el estado de las mismas.

    gridState.options = { cellSelection: false, sorting: false };
typescript

    Las API de punto único fáciles de usar permiten lograr una funcionalidad de persistencia de estado completa en solo unas pocas líneas de código. Copie y pegue el código desde abajo: guardará el estado de la cuadrícula en el objeto del navegador LocalStorage cada vez que el usuario abandone la página actual. Cada vez que el usuario regrese a la página principal, se restaurará el estado de la cuadrícula. Ya no es necesario configurar esas complejas expresiones avanzadas de filtrado y ordenación cada vez para obtener los datos que desea: hágalo una vez y haga que el código de abajo haga el resto por sus usuarios:

    constructor() {
    window.addEventListener("load", () => { this.restoreGridState(); });
    window.addEventListener("beforeunload", () => { this.saveGridState(); });
}

// Using methods that work with IgcGridStateInfo object.
public saveGridState() {
    const state = this.gridState.getState();
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

public restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyState(JSON.parse(state));
    }
}

// Or using string alternative methods.
public saveGridStateString() {
    const state = this.gridState.getStateAsString();
    window.localStorage.setItem('grid-state', state);
}

public restoreGridStateString() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}
typescript
    Ignite UI for Web Components | CTA Banner

    Restaurar la configuración de pivote

    IgcGridState No conservará las funciones de dimensión pivote, los formateadores de valores, etc. de forma predeterminada (consulte Limitaciones). La restauración de cualquiera de estos se puede lograr con código a nivel de aplicación. Expone IgcPivotGridComponent dos eventos que se pueden usar para retroceder cualquier función personalizada que tenga en la configuración: DimensionInit and ValueInit. Vamos a mostrar cómo hacer esto:

    • Asigne controladores de eventos para los DimensionInit eventos y ValueInit:
     constructor() {
    var grid = document.getElementById('grid') as IgcPivotGridComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    grid.addEventListener("valueInit", (ev:any) => this.onValueInit(ev));
    grid.addEventListener("dimensionInit", (ev:any) => this.onDimensionInit(ev));
}
ts

    Los DimensionInit eventos y ValueInit se emiten para cada valor y dimensión definidos en la pivotConfiguration propiedad.

    • En el controlador de ValueInit eventos, establezca todos los agregadores, formateadores y estilos personalizados:
    public onValueInit(event: any) {
    const value: IgcPivotValue = event.detail;
    if (value.member === 'AmountofSale') {
        value.aggregate.aggregator = this.totalSale;
        value.aggregateList?.forEach((aggr: any) => {
            switch (aggr.key) {
                case 'SUM':
                    aggr.aggregator = this.totalSale;
                    break;
                case 'MIN':
                    aggr.aggregator = this.totalMin;
                    break;
                case 'MAX':
                    aggr.aggregator = this.totalMax;
                    break;
            }
        });
    } else if (value.member === 'Value') {
        value.formatter = (value: any) => value ? '$' + parseFloat(value).toFixed(3) : undefined;
        value.styles.upFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
        value.styles.downFontValue = (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
    }
}
ts
    • En el controlador de eventos, DimensionInit establezca todas las implementaciones personalizadas MemberFunction:
    public onDimensionInit(event: any) {
    const dim: IgcPivotDimension = event.detail;
    switch (dim.memberName) {
        case 'AllProducts':
            dim.memberFunction = () => 'All Products';
            break;
        case 'ProductCategory':
            dim.memberFunction = (data: any) => data.ProductName;
            break;
        case 'City':
            dim.memberFunction = (data: any) => data.City;
            break;
        case 'SellerName':
            dim.memberFunction = (data: any) => data.SellerName;
            break;
    }
}
ts

    Manifestación

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Restaurar estrategias de pivote

    IgcGridState No persistirá ni las operaciones de pivote remoto ni las estrategias de dimensión personalizadas.

    La restauración de cualquiera de estos se puede lograr con código a nivel de aplicación. Expone IgcGridState un evento llamado StateParsed que se puede usar para modificar adicionalmente el estado de la cuadrícula antes de que se aplique. Vamos a mostrar cómo hacer esto:

    StateParsed solo se emite cuando estamos usando SetState el argumento with string.

    • Establezca una estrategia de clasificación personalizada y estrategias personalizadas de dimensiones de filas y columnas dinámicas:
    public pivotConfiguration: IgcPivotConfiguration = {
    columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    columns: [...],
    rows: [...],
    values: [...],
    filters: [...]
};
private gridState: IgcGridStateComponent;

constructor() {
    var grid = document.getElementById("grid") as IgcPivotGridComponent;
    this.gridState = document.getElementById('gridState') as IgcGridStateComponent;
    grid.pivotConfiguration = this.pivotConfiguration;
    PivotNoopData.getData().then((value) => {
        grid.data = value;
    });
    this.gridState.addEventListener('stateParsed', (ev:any) => this.stateParsedHandler(ev) );
}
ts
    • La restauración del estado desde el LocalStorage y la aplicación de las estrategias personalizadas tiene el siguiente aspecto:
    public restoreGridState() {
    const state = window.localStorage.getItem(this.stateKey);
    if (state) {
        this.gridState.applyStateFromString(state);
    }
}

public stateParsedHandler(ev: any) {
    const parsedState = ev.detail;
    parsedState.pivotConfiguration.rowStrategy = IgcNoopPivotDimensionsStrategy.instance();
    parsedState.pivotConfiguration.columnStrategy = IgcNoopPivotDimensionsStrategy.instance();
}
ts

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Limitaciones

    • getState utiliza el método JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no admite funciones, es por eso que la IgcGridState directiva ignorará la dimensión MemberFunction pivote, los valores Member pivote, Formatter las funciones Styles personalizadas Aggregate y las estrategias de configuración pivote: ColumnStrategy and RowStrategy.