¿Funcionaría la virtualización, el ordenamiento, el filtrado en un modelo del lado del servidor? Sí, pero la responsabilidad recae en ti, el desarrollador. Por ejemplo, si estás usando un modelo de filas del lado del servidor pero digamos que tu backend, tu base de datos tiene un millón de filas y solo estás extrayendo 1,000 filas, la cuadrícula obviamente no puede ordenar o filtrar datos que no conocemos. Entonces, ¿qué sucedería allí? Habría una serie de eventos. Si un usuario hace clic en ordenar o filtrar, llamaríamos a ganchos o eventos a los que tú, como desarrollador, escucharías y luego actualizarías desde la fuente de datos remota, los datos. Por ejemplo, antes estabas mostrando todas las filas de A a C y el usuario quiere mostrar todas las filas de S a X, te lo diríamos, eso es lo que el usuario quiere hacer, obtendrías las filas de S a X y las devolverías a la cuadrícula. Entonces, esto traslada la responsabilidad de nosotros en este momento y podemos hacer todo tipo de filtrado y paginación, pero si tienes datos del lado del servidor o virtualización o desplazamiento infinito, entonces tú, como desarrollador, debes hacerlo en tu parte porque obviamente la cuadrícula no puede filtrar datos que no conoce. Espero que tenga sentido. Echa un vistazo a la documentación para ver ejemplos reales de trabajo. Tenemos repositorios completos en GitHub que te muestran cómo hacer esto. ¿Vamos a cubrir la edición en línea con una edición de la comunidad? Sí, puedo hacer eso brevemente. Puedes tener editores bastante complejos, que no vamos a cubrir en esto, pero para hacer que un campo sea editable de forma predeterminada con una simple edición en línea, todo lo que tienes que hacer es establecer editable en true. Entonces, por defecto, eso es todo lo que tienes que hacer, vamos a hacerlo con la edad, ahora si hago clic en ella, es editable. Entonces, si hago clic en Michael Phelps, no sucede nada, hago clic en enter o doble clic, no sucede nada. Si hago clic en edad, ahora es editable y puedo cambiarlo a 29. Así que todo lo que hice fue establecer editable en true. Editable también puede ser una devolución de llamada, puedes tenerlo por fila y por celda, tal vez quieras que algunas celdas y algunas filas sean editables y otras no, como antes, te pasaremos como parámetro el estado de la cuadrícula, el estado de la celda, las API y todas esas cosas, y puedes determinar dinámicamente qué es editable. Y finalmente, puedes tener un editor de celdas y puede ser un componente de React. Tu componente de React, que no vamos a describir hoy. Pero podría ser como lo mostramos con el editor rojo, lo siento, el renderizador anterior, y un filtro que describiremos a continuación, puedes tener un editor de celdas, lo siento, un editor de celdas como un componente. Espero que eso responda esa pregunta. Entonces, en el caso de uso más simple, solo dice editable, y luego la celda será editable, supongo que eso es lo que quieres decir con edición en línea. De acuerdo. Entonces, la siguiente sección que vamos a ver son los estados de filtro, que fue una pregunta que tuvimos antes. Entonces, cada vez que realices una operación de filtro o ordenamiento, o casi cualquier cosa, puedes obtener los estados del filtro o el estado del filtro, es posible que desees decir que un usuario ha filtrado en tres columnas de una manera específica y quiere guardar eso. Entonces, cada vez que abran la aplicación, se restaurará, es posible que desees guardar los estados, guardarlo en un backend. Y cuando el usuario vuelva a iniciar sesión, cargar los estados y devolverlos. Entonces, describamos cómo podemos obtener los estados y qué podemos hacer con ellos. Entonces, para guardar los estados en nuestro caso, no los guardaremos en un backend, solo los usaremos como referencia. Relativo a nuestro perfil. y vamos a tener, vamos a juntar esto para que puedas ver el código. No está muy lejos de donde lo estamos usando. Entonces, tenemos una referencia que podemos usar para almacenar los datos, y vamos a tener botones para guardar y aplicar. Y vamos a agregar los botones en esta sección en un minuto. Entonces, digamos, en el botón guardar, veamos cuántos errores cometo mientras estoy codificando en vivo aquí. Y describiré línea por línea lo que he hecho. Entonces vamos a usar esta devolución de llamada en un segundo, pero lo que sí sabemos es que estamos usando la referencia de la cuadrícula que usamos anteriormente si recuerdas, en el componente de la cuadrícula. gridRef.current.api nos da la API de la cuadrícula en lugar de la API de la columna y llamamos a getFilterModel. Y eso nos dará una representación directa de todos los modelos actuales aplicados. Pero comencemos con eso. Solo echemos un vistazo a ese modelo de filtro. En el clic, en el botón guardar, guardar filtro. En realidad no estamos guardando nada todavía, pero podemos ver la salida. Entonces, como recordatorio, vamos a obtener el modelo de filtro actual y lo vamos a mostrar en console.log. Entonces, si mostramos eso, verás, no muy emocionante. Es un objeto vacío. Hagamos algo más interesante. Digamos que la edad es igual a 25. Y ahora, si lo guardamos nuevamente, ahora vemos un objeto JSON que tiene edad, el tipo de filtro es un número, el tipo es igual y el filtro es 25. Ahora no necesitas entender la salida de getFilterModel o setFilterModel. No tienes que hacerlo, la cuadrícula proporcionará cuál es el estado actual, puedes guardarlo y restaurarlo. Puedes manipularlo si quieres, pero normalmente no tendrás que hacerlo. Y no tienes que entenderlo, pero el punto es que esto mostrará el estado actual del filtro. Podemos aplicar otro filtro y si volvemos a mostrar el estado, veremos que el objeto JSON tiene dos edades, con edad y año. Entonces, en realidad no estamos guardando el filtro, como se especifica, solo lo estamos mostrando para que puedas ver qué está haciendo el modelo de filtro. Entonces, guardemos eso con, guardarFiltro.current = filterModel. Entonces, en la referencia que proporcionamos anteriormente en current, vamos a guardar el modelo de filtro actual. Agreguemos un botón para realmente usar esto. Entonces, lo que tenemos aquí ahora es pushMe, que comentaré solo por simplicidad para que no lo veamos. Entonces, tenemos estados de filtro guardados, que cada vez que hago clic, se guardará en nuestra referencia de cuadrícula, el estado de la cuadrícula, y aplicar, lo sacaremos del estado actual del filtro y lo aplicaremos. Así que probémoslo. Apliquemos mitch allí y luego el país contiene Australia. Entonces, el estado actual es ese, me equivoqué al hacer clic en el filtro, lo siento. En la A, tenemos cualquier cosa que contenga mitch, y luego el país, cualquier cosa que contenga os. Entonces, tenemos Australia y Austria y cualquier nombre de atleta que contenga mitch. Entonces, si guardamos eso, digamos que cambiamos el filtro ahora. Vamos, no queremos mitch, queremos tim y no queremos ningún filtro de país. Digamos que no tenemos ningún filtro de país. Entonces cambiamos el filtro. Lo guardamos anteriormente. Teníamos, teníamos un filtro de atleta y un filtro de país. Y ahora lo hemos cambiado, para tener solo atletas con el nombre de Tim. Ahora, digamos que el usuario quiere, ha realizado cambios y piensa, está bien, quiero volver a donde estaba antes. Podemos aplicar los estados de filtro. Y ahora los filtros vuelven a estar como antes. Tenemos el filtro de atleta, que contiene mitch y el filtro de país, que contiene os. Y solo para recapitular lo que hicimos allí, esto fue tal vez un poco rápido. En el botón guardar, obtenemos acceso al modelo de filtro, que es un JSON data, y puedes convertirlo en una cadena y tal vez guardarlo en una base de datos y luego convertirlo nuevamente a JSON y restaurarlo. Pero lo que hemos hecho es, obtener el estado actual del modelo y guardarlo en una referencia en nuestro caso de uso. Más realistamente, lo guardarías en un backend de nuestra base de datos. Y luego, para aplicar, hacemos lo contrario. Obtenemos el modelo que guardamos en la referencia y lo volvemos a aplicar a la cuadrícula usando los métodos de la API. Eso, a grandes rasgos, es cómo obtendrías el estado de los filtros en toda la cuadrícula y cómo los restablecerías. Puedes manipular ese JSON data si quieres, la mayoría de las veces no lo harás, pero puedes y luego puedes obtenerlo y establecerlo usando métodos de la API. Antes de continuar, espero que eso responda la pregunta, quienquiera que haya tenido una pregunta sobre los estados de filtro, espero que eso responda tu pregunta. Es bastante fácil.
Comments