React Persistencia del estado de la cuadrícula
La persistencia de estado Ignite UI for React en React cuadrícula permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se aplica en IgrGridState
el React IgrGrid
, expone los métodos , GetStateAsString
,y ApplyStateFromString
ApplyState
que los GetState
desarrolladores pueden usar para lograr la persistencia de estado en cualquier escenario.
Supported Features
IgrGridState
permite guardar y restaurar el estado de las siguientes características:
- Sorting
- Filtering
- Filtrado avanzado
- Paginación
- CellSelection
- RowSelection
- ColumnSelection
- RowPinning
- Expansión
- GroupBy
- Columns
- Multi column headers
- Orden de columnas
- Column properties defined by the
IColumnState
interface.
Usage
El getState
método devuelve el estado de la cuadrícula en un IgrGridStateInfo
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.
<IgrGrid>
<IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>
// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridState.getState([]);
// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString([]);
// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridState.getState(['sorting', 'filtering']);
ApplyState
- El método acepta un IgrGridStateInfo
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, [])
El Options
objeto implementa la IgrGridStateOptions
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.
<IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>
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:
<IgrGrid rendered={restoreGridState}>
<IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
</IgrGrid>
useEffect(() => {
restoreGridState();
window.addEventListener('beforeunload', saveGridState);
return () => {
window.removeEventListener('beforeunload', saveGridState);
}
}, []);
// Using methods that work with IgrGridStateInfo object.
function saveGridState() {
const state = gridState.getState([]);
window.localStorage.setItem('grid-state', JSON.stringify(state));
}
function restoreGridState() {
const state = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyState(JSON.parse(state), []);
}
}
//Or using string alternative methods.
function saveGridState() {
const state = gridState.getStateAsString([]);
window.localStorage.setItem('grid-state', state);
}
function restoreGridState() {
const state = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyStateFromString(state, []);
}
}
Demo
Limitations
getStateAsString
utiliza el método JSON.stringify() para convertir los objetos originales en una cadena JSON. JSON.stringify() no es compatible con Functions, por lo que elIgrGridState
componente ignorará las columnasformatter
,,,,,,,headerTemplate
,filters
summaries
sortStrategy
cellClasses
cellStyles
bodyTemplate