Cuadrículas de datos
El widget Cuadrícula de datos muestra los registros maestros de datos en formato de cuadrícula. Las cuadrículas de Datos se muestran como celdas dentro de una cuadrícula o tabla.
Al crear tu cuadrícula de Datos, la celda superior izquierda se mostrará con los nombres de tus campos maestros de Datos. Las celdas adicionales se mostrarán con un relleno gris. Cuando simules tu prototipo, las celdas adicionales se rellenarán con tus registros maestros de Datos.
Mostrar registros maestros de Datos en una cuadrícula de Datos
Aprende a mostrar registros maestros de Datos en forma de cuadrícula con una cuadrícula de Datos en tus prototipos interactivos. Hagámoslo paso a paso:
- En un nuevo prototipo web, crea un nuevo Maestro de datos haciendo clic en el icono «+» de la paleta Maestros de datos. En el cuadro de diálogo que aparece, dale un nombre a tu Maestro de datos. Para que coincida con nuestro ejemplo, llámalo «Lista de contactos».
- Añade Campos a tu Maestro de datos haciendo clic en el icono «+» de la derecha. Para que coincida con nuestro ejemplo, crea los siguientes Campos: Nombre, Correo electrónico, Empresa e Imagen.
- Cambia el Tipo de campo de imagen a «Carga de archivo» y haz clic en «Aceptar».
- De vuelta en la paleta Maestros de datos, haz clic con el botón derecho en tu Maestro de datos y selecciona la pestaña Ver y editar registros en el cuadro de diálogo que aparece. Crea Registros de datos, asignando a cada uno un nombre, un correo electrónico, una empresa y una imagen. Haz clic en «Aceptar».
- A continuación, ve a Barra de Herramientas – Icono Más – Contenido Dinámico – haz clic en «Rejilla de Datos».En el cuadro de diálogo que aparece, dale un nombre a tu Rejilla de Datos («Rejilla de Contactos» para que coincida con nuestro ejemplo). Selecciona tu Maestro de Datos en el desplegable «Maestros de Datos».Queremos incluir todos los Campos del Maestro de Datos en la Rejilla de Datos. Para moverlos todos al cuadro de selección, haz clic en el icono de la flecha de doble línea a la derecha.A continuación, haz clic en «Aceptar» y coloca tu Cuadrícula de datos en el centro del lienzo.En el lienzo, la celda superior izquierda mostrará los nombres de los Campos de muestra.
- Vuelve a hacer clic en «Simular» para simular tu Rejilla de Datos con los datos reales en su sitio.
Propiedades
Desde la paleta Propiedades, puedes modificar las siguientes propiedades de tu Rejilla de Datos:
- Número de columnas
- Número de celdas por página
- Orientación – gira tu Rejilla de Datos horizontal o verticalmente
- Espaciado – modifica el espaciado entre celdas
Personalizar una cuadrícula de datos
Con Justinmind, puedes personalizar el aspecto de tu cuadrícula de Datos. Sigue los pasos que se indican a continuación para personalizar columnas individuales de tu cuadrícula de Datos:
- Ve a la paleta Propiedades y cambia el número de columnas de la rejilla Datos a tres.
- A continuación, en la paleta Capas, selecciona la celda «Celda de cuadrícula 1» dentro de la cuadrícula Datos.
- En el lienzo, elimina los elementos de Texto «Nombre», «correo electrónico», «Empresa» e «imagen» para que coincidan con nuestro ejemplo. A continuación, distribuye los Campos de Texto de Entrada de la celda y cambia el tamaño de las celdas para que coincidan con nuestro ejemplo o para que lo hagas a tu gusto.
- Haz clic en «Simular» para ver tu cuadrícula de Datos personalizada.
Crear un filtro de búsqueda para una cuadrícula de Datos
Puedes crear un prototipo de lista en la que se puedan realizar búsquedas utilizando una Cuadrícula de Datos.
Sigue los pasos que se indican a continuación para saber cómo hacerlo:
- En el mismo prototipo, crea un Campo de Texto de Entrada en el Lienzo, encima de la Cuadrícula de Datos.
- Con el Campo de Texto de Entrada seleccionado, crea un evento «Al Pulsar la Tecla» + «Establecer Valor», seleccionando la Cuadrícula de Datos como destino de la acción. Deja la entrada ‘Cualquier Tecla’ por defecto. Para el valor, haz clic en el botón de opción «Calculado» y luego en el texto «Añadir expresión». Verás que aparece el constructor de Expresiones Calculadas.
- En el constructor, sigue estos pasos para crear la expresión:1. Arrastra la función «Filtro» a la expresión.
2. Arrastra tu Maestro de Datos (de la pestaña Maestros de Datos) al primer término de la nueva función Filtro.
3. Arrastra el Campo de Texto de Entrada al segundo término y haz clic en «Aceptar» y luego en «Aceptar» de nuevo para cerrar el cuadro de diálogo Eventos. - Haz clic en «Simular» e intenta buscar un Registro Maestro de Datos en tu Rejilla de Datos.
Puedes descargar nuestro ejemplo aquí.