Persistencia del estado de la cuadrícula jerárquica React
La Ignite UI for React en React Hierarchical Grid permite a los desarrolladores guardar y restaurar fácilmente el estado de la cuadrícula. Cuando se aplica IgrGridState en React IgrHierarchicalGrid, se exponen los métodos GetState, GetStateAsString, ApplyState y ApplyStateFromString que los desarrolladores pueden usar para lograr la persistencia del estado en cualquier escenario.
Funciones admitidas
IgrGridState permite guardar y restaurar el estado de las siguientes características:
RowIslands
guardar/restaurar funciones para todas las cuadrículas secundarias en la jerarquía
Clasificación
Filtración
AdvancedFiltering
Paginación
CellSelection
RowSelection
ColumnSelection
RowPinning
Expansión
Columns
Multi column headers
Orden de columnas
Column properties defined by the IColumnState interface.
Uso
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.
// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public APIconststate: IgrGridStateInfo = gridState.getState([]);
// get all features` state in a serialized JSON stringconststateString: string = gridState.getStateAsString([]);
// get the sorting and filtering expressionsconstsortingFilteringStates: IgrGridStateInfo = gridState.getState(['sorting', 'filtering']);
tsx
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.
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.
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:
useEffect(() => {
restoreGridState();
window.addEventListener('beforeunload', saveGridState);
return () => {
window.removeEventListener('beforeunload', saveGridState);
}
}, []);
// Using methods that work with IgrGridStateInfo object.function saveGridState() {
conststate = gridState.getState([]);
window.localStorage.setItem('grid-state', JSON.stringify(state));
}
function restoreGridState() {
conststate = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyState(JSON.parse(state), []);
}
}
//Or using string alternative methods.function saveGridState() {
conststate = gridState.getStateAsString([]);
window.localStorage.setItem('grid-state', state);
}
function restoreGridState() {
conststate = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyStateFromString(state, []);
}
}
tsx
Restaurar redes secundarias
El estado de guardado/restauración de las cuadrículas secundarias está controlado por la RowIslands propiedad y está habilitado de forma predeterminada. IgrGridState utilizará las mismas opciones para guardar/restaurar características tanto para la cuadrícula raíz como para todas las cuadrículas secundarias de la jerarquía. Por ejemplo, si pasamos las siguientes opciones:
A continuación, la getState API devolverá el estado de todas las funciones de las cuadrículas (cuadrícula raíz y cuadrículas secundarias) excluyendo Selection y Sorting. Si más adelante el desarrollador desea restaurar solo el Filtering estado de todas las cuadrículas, use:
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Limitaciones
Al restaurar todas las características de la cuadrícula a la vez (mediante applyState una API sin parámetros), es posible que las propiedades de columna de la cuadrícula raíz se restablezcan a los valores predeterminados. Si esto sucede, restaure las columnas o la función de selección de columnas por separado después de eso: