{"id":124627,"date":"2018-03-08T15:31:23","date_gmt":"2018-03-08T14:31:23","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/data-grids\/"},"modified":"2025-02-03T16:43:01","modified_gmt":"2025-02-03T15:43:01","slug":"data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/rejillas-de-datos","title":{"rendered":"Cuadr\u00edculas de datos"},"content":{"rendered":"<p>El widget Cuadr\u00edcula de datos muestra los registros maestros de datos en formato de cuadr\u00edcula. Las cuadr\u00edculas de Datos se muestran como celdas dentro de una cuadr\u00edcula o tabla. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13817\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/display-data-master-records-data-grid.png\" alt=\"mostrar-datos registros maestros rejilla de datos\" width=\"755\" height=\"456\"><br \/>\nAl crear tu cuadr\u00edcula de Datos, la celda superior izquierda se mostrar\u00e1 con los nombres de tus campos maestros de Datos. Las celdas adicionales se mostrar\u00e1n con un relleno gris. Cuando simules tu prototipo, las celdas adicionales se rellenar\u00e1n con tus registros maestros de Datos.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-grid\"><\/a>Mostrar registros maestros de Datos en una cuadr\u00edcula de Datos<\/h2>\n<p>Aprende a mostrar registros maestros de Datos en forma de cuadr\u00edcula con una cuadr\u00edcula de Datos en tus prototipos interactivos. Hag\u00e1moslo paso a paso:<\/p>\n<ol>\n<li>En un nuevo prototipo web, crea un nuevo Maestro de datos haciendo clic en el icono \u00ab+\u00bb de la paleta Maestros de datos. En el cuadro de di\u00e1logo que aparece, dale un nombre a tu Maestro de datos. Para que coincida con nuestro ejemplo, ll\u00e1malo \u00abLista de contactos\u00bb.  <\/li>\n<li>A\u00f1ade Campos a tu Maestro de datos haciendo clic en el icono \u00ab+\u00bb de la derecha. Para que coincida con nuestro ejemplo, crea los siguientes Campos: Nombre, Correo electr\u00f3nico, Empresa e Imagen. <\/li>\n<li>Cambia el Tipo de campo de imagen a \u00abCarga de archivo\u00bb y haz clic en \u00abAceptar\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-Data-Master.png\" alt=\"Crear un maestro de datos\"><\/video><\/li>\n<li>De vuelta en la paleta Maestros de datos, haz clic con el bot\u00f3n derecho en tu Maestro de datos y selecciona la pesta\u00f1a Ver y editar registros en el cuadro de di\u00e1logo que aparece. Crea Registros de datos, asignando a cada uno un nombre, un correo electr\u00f3nico, una empresa y una imagen. Haz clic en \u00abAceptar\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-record-to-a-data-master.png\" alt=\"simular rejilla de datos\" width=\"755\" height=\"425\"><\/li>\n<li>A continuaci\u00f3n, ve a Barra de Herramientas &#8211; Icono M\u00e1s &#8211; Contenido Din\u00e1mico &#8211; haz clic en \u00abRejilla de Datos\u00bb.En el cuadro de di\u00e1logo que aparece, dale un nombre a tu Rejilla de Datos (\u00abRejilla de Contactos\u00bb para que coincida con nuestro ejemplo). Selecciona tu Maestro de Datos en el desplegable \u00abMaestros de Datos\u00bb.Queremos incluir todos los Campos del Maestro de Datos en la Rejilla de Datos. Para moverlos todos al cuadro de selecci\u00f3n, haz clic en el icono de la flecha de doble l\u00ednea a la derecha.A continuaci\u00f3n, haz clic en \u00abAceptar\u00bb y coloca tu Cuadr\u00edcula de datos en el centro del lienzo.En el lienzo, la celda superior izquierda mostrar\u00e1 los nombres de los Campos de muestra.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-fields-to-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-fields-to-data-grid.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Add-fields-to-data-grid.png\" alt=\"A\u00f1adir campos a la cuadr\u00edcula de datos\"><\/video><\/li>\n<li>Vuelve a hacer clic en \u00abSimular\u00bb para simular tu Rejilla de Datos con los datos reales en su sitio.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/simulate-data-grid-1.png\" alt=\"simular rejilla de datos\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-grid-properties\"><\/a>Propiedades<\/h2>\n<p>Desde la paleta Propiedades, puedes modificar las siguientes propiedades de tu Rejilla de Datos:<\/p>\n<ul>\n<li>N\u00famero de columnas<\/li>\n<li>N\u00famero de celdas por p\u00e1gina<\/li>\n<li>Orientaci\u00f3n &#8211; gira tu Rejilla de Datos horizontal o verticalmente<\/li>\n<li>Espaciado &#8211; modifica el espaciado entre celdas<\/li>\n<\/ul>\n<h2><a id=\"customizing-a-data-grid\"><\/a>Personalizar una cuadr\u00edcula de datos<\/h2>\n<p>Con Justinmind, puedes personalizar el aspecto de tu cuadr\u00edcula de Datos. Sigue los pasos que se indican a continuaci\u00f3n para personalizar columnas individuales de tu cuadr\u00edcula de Datos: <\/p>\n<ol>\n<li>Ve a la paleta Propiedades y cambia el n\u00famero de columnas de la rejilla Datos a tres.<\/li>\n<li>A continuaci\u00f3n, en la paleta Capas, selecciona la celda \u00abCelda de cuadr\u00edcula 1\u00bb dentro de la cuadr\u00edcula Datos.<\/li>\n<li>En el lienzo, elimina los elementos de Texto \u00abNombre\u00bb, \u00abcorreo electr\u00f3nico\u00bb, \u00abEmpresa\u00bb e \u00abimagen\u00bb para que coincidan con nuestro ejemplo. A continuaci\u00f3n, distribuye los Campos de Texto de Entrada de la celda y cambia el tama\u00f1o de las celdas para que coincidan con nuestro ejemplo o para que lo hagas a tu gusto. <\/li>\n<li>Haz clic en \u00abSimular\u00bb para ver tu cuadr\u00edcula de Datos personalizada.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/customized-data-grid-1.png\" alt=\"cuadr\u00edcula de datos personalizada\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"creating-a-search-filter-for-a-data-grid\"><\/a>Crear un filtro de b\u00fasqueda para una cuadr\u00edcula de Datos<\/h2>\n<p>Puedes crear un prototipo de lista en la que se puedan realizar b\u00fasquedas utilizando una Cuadr\u00edcula de Datos.<\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-search-filter-2.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-search-filter-2.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-search-filter-2.png\" alt=\"Crear un filtro de B\u00fasqueda\"><\/video><\/p>\n<p>Sigue los pasos que se indican a continuaci\u00f3n para saber c\u00f3mo hacerlo:<\/p>\n<ol>\n<li>En el mismo prototipo, crea un Campo de Texto de Entrada en el Lienzo, encima de la Cuadr\u00edcula de Datos.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13828\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/12\/searchable-list-data-grid-2.png\" alt=\"lista consultable cuadr\u00edcula de datos\" width=\"755\" height=\"450\"><\/li>\n<li>Con el Campo de Texto de Entrada seleccionado, crea un evento \u00abAl Pulsar la Tecla\u00bb + \u00abEstablecer Valor\u00bb, seleccionando la Cuadr\u00edcula de Datos como destino de la acci\u00f3n. Deja la entrada &#8216;Cualquier Tecla&#8217; por defecto. Para el valor, haz clic en el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb y luego en el texto \u00abA\u00f1adir expresi\u00f3n\u00bb. Ver\u00e1s que aparece el constructor de Expresiones Calculadas.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16419\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-GridEvent.png\" alt=\"A\u00f1adir expresi\u00f3n para la b\u00fasqueda\" width=\"792\" height=\"573\"><\/li>\n<li>En el constructor, sigue estos pasos para crear la expresi\u00f3n:<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Search-Filter-data-grid-2.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Search-Filter-data-grid-2.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Search-Filter-data-grid-2.png\" alt=\"Evento de filtro de b\u00fasqueda\"><\/video><strong>1.<\/strong> Arrastra la funci\u00f3n \u00abFiltro\u00bb a la expresi\u00f3n.<br \/>\n 2. Arrastra tu Maestro de Datos (de la pesta\u00f1a Maestros de Datos) al primer t\u00e9rmino de la nueva funci\u00f3n Filtro.<br \/>\n 3. Arrastra el Campo de Texto de Entrada al segundo t\u00e9rmino y haz clic en \u00abAceptar\u00bb y luego en \u00abAceptar\u00bb de nuevo para cerrar el cuadro de di\u00e1logo Eventos.<\/li>\n<li>Haz clic en \u00abSimular\u00bb e intenta buscar un Registro Maestro de Datos en tu Rejilla de Datos.<\/li>\n<\/ol>\n<p>Puedes <a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/examples\/create-a-justinmind-datagrid.vp\">descargar nuestro ejemplo aqu\u00ed<\/a>.<\/p>\n<p><!-- \n\n<h2><a id=\"paginating-data-grids\"><\/a>Paginating Data Grids<\/h2>\n\n\nWith Justinmind, you can paginate your Data Grid. You might want to do this when if you have lots of data Records.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13832\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/paginate-data-grid.gif\" alt=\"paginate data grid\" width=\"755\" height=\"400\" \/>\nFollow the next steps to learn how to paginate your Data Grid:\n\n\n<ol>\n \t\n\n<li>Create a Data Master in a new web prototype.\n\nName it \u201cProduct\u201d. Create three Fields: Product name, Price and Image.\n\nChange the Type of the Image Field to \u201cFile Upload\u201d and click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Back in the Data Masters palette, right click on your Data Master and select the View and edit records option. Create six product Records. Click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Next, go to Toolbar - plus sign icon - Dynamic Content - click on \u2018Data Grid\u2019.\n\nIn the dialog that appears, give your Data Grid a name (\u201cProduct_Data_Grid\u201d to match our example), and move the \u201cProduct\u201d Data Master Fields from the left to the right. Click \u201cOK\u201d and position your Data Grid in the center of the canvas.<\/li>\n\n\n \t\n\n<li>Remove the \u201cProduct name\u201d, \u201cPrice\u201d and \u201cImage\u201d text elements from within the Data Grid. To select those elements, you can either double click on them or change to the \u201cDirect Selection Tool\u201d (keyboard shortcut A).<\/li>\n\n\n \t\n\n<li>Select the Data Grid in the Layers palette and go to the Properties palette.<\/li>\n\n\n \t\n\n<li>Then, change the number of Rows to one and the number of \"Cells per Page\" to three. This means that only three Records will be listed per page in your Data Grid.<\/li>\n\n\n \t\n\n<li>Next, go to Toolbar - plus sign icon - Dynamic Content - click on \u2018Index\u2019, click in the canvas and link it to your Data Grid by choosing the \u201cProduct\u201d Data Grid from the Data Grid drop-down in the Properties palette. The Index element will automatically show the number of listed pages based on the number of rows per page established (in our example, the number is four).<\/li>\n\n\n<\/ol>\n\n\nNow let's add some buttons to the prototype to allow the user to navigate to different pages within your Data Grid:\n\n\n<ol>\n \t\n\n<li>Go to the Toolbar - plus sign - Button or press B to create two buttons and label them \u201cNext\u201d, \u201cPrevious\u201d.<\/li>\n\n\n \t\n\n<li>Select the Button named \u201cNext\u201d and go to the Events palette. Add an \u2018\u201dOn Click\u201d + \u201cPaginate Data Grid\u201d event, selecting the Data Grid from the Layers palette.<\/li>\n\n\n \t\n\n<li>Below, select the \u201cNext page\u201d action from the drop-down list, and click \u201cOK\u201d.<\/li>\n\n\n \t\n\n<li>Repeat step two for the remaining Button, updating the action to \u201cPrevious Page\u201d. Click \u201cSimulate\u201d and click between the pages in your Data Grid. The Data Grid\u2019s values should change when you click the \u201cNext\u201d and \u201cPrevious\u201d buttons.<\/li>\n\n\n<\/ol>\n\n\nYou can <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datagrid.vp\">download our example here<\/a>.\n\n--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El widget Cuadr\u00edcula de datos muestra los registros maestros de datos en formato de cuadr\u00edcula. Las cuadr\u00edculas de Datos se muestran como celdas dentro de una&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8422],"tags":[],"class_list":["post-124627","post","type-post","status-publish","format-standard","hentry","category-formacion","category-formularios-y-datos"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124627"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124627"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124627\/revisions"}],"predecessor-version":[{"id":126116,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124627\/revisions\/126116"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}