INTERFAZ GRÁFICA - TABLAS

En la mayoría de los casos se emplea una visualización de tablas de base de datos en la interfaz mediante un elemento gráfico denominado Bootgrid y algunos complementos, que permiten visualizar y exportar los datos en distintas formas.

En la siguiente imagen se aprecia una tabla ordenada en forma descendente por la columna NIT (al lado de nombre de columna está símbolo “v”




Fig 72 Ejemplo de una Tabla de Datos.


Si la pantalla es de menor tamaño o si la cantidad de columnas a visualizar son más, se visualizará una barra de deslizamiento horizontal que indica que hay que desplazar el contenido para poder visualizarla. En la figura siguiente se aprecia dicho efecto y se aprecia que los datos están ordenados por la columna Teléfono de manera ascendente “^”



Fig 73 Ejemplo de una Tabla de Datos más ancha que la pantalla, se presenta barra de desplazamiento horizontal.

Fig 74 Ejemplo de una Tabla de Datos más ancha que la pantalla, se presenta barra de desplazamiento horizontal.


Los botones situados al costado superior derecho se pueden resumir en.



Fig 75 Detalle de botones para controlar tabla de datos.



Refrescar:         refresca el despliegue de información 

Elementos:         Determina el número de elementos (filas) que se desplegaran en una página, útil si hay muchos registros, por rapidez 10 es adecuado, otros valores 25, 50 o todos,



Fig 76 Detalle de botones para controlar Visualización de elementos de la tabla de datos.


Si una tabla tiene muchos registros y se ha optado por la opción diferente de “todos” en la parte inferior de la tabla a la izquierda se verá una regla que indica el número de página que se está mostrando y a su derecha la cantidad de ítems que se posee dicha tabla. En la imagen actual la tabla muestra el 3 y posee una representación de 10 elementos por página. Por lo tanto la 3 página representará de los elementos 21  al 30. Como indica 22, la tercera página solo mostrará 2 elementos.

Fig 77 Detalle elementos de control de la paginación de la tabla de datos.


Columnas: Permite determinar que columna se puede visualizar. Al presionar este botón, aparece una ventana emergente con todas las columnas que la tabla puede desplegar, con una opción de marcar la casilla. Si la casilla está marcada ☑ esta columna será visualizada en la tabla. Por el contrario, si la opción no está marcada □ esta columna no será visualizada en la tabla. Por espacio o conveniencia uno puede determinar que columnas puede visualizar.



Fig 78 Detalle elementos de control Visualización de columnas de la tabla de datos.


Exportar: Permite guardar el contenido de esta tabla en los formatos desplegados. Al presionar el botón exportar, se despliega una lista con posibles formatos. 

Importante mencionar que el contenido a guardar es afectado por el valor de Elementos y Columnas antes seleccionado, es decir puedo exportar las columnas que estén seleccionadas en la opción columnas y la cantidad de ítems a exportar, si no está seleccionado todos será lo que se visualice en la tabla. 


Fig 79 Detalle elementos de control exportación del contenido de la tabla de datos


Agregar: Permite agregar un nuevo ítem a la tabla. Al seleccionar aparecerá una ventana emergente con todos los parámetros que ésta tabla posea. 

Ahora cada elemento de la tabla es posible modificarlo con botones que están situados al costado derecho, que dependen del ítem asociado. Es decir si el botón esta en la primera fila, sus acciones afectarán la primera fila.





Cada registro (ítem) de una tabla, puede tener botones de acción. Estos serán validos para el registro seleccionado. 

Así por ejemplo si una tabla es editable por la web, poseerá los siguientes botones por cada registro "EDITAR" y "BORRAR". Junto a estos botones también está visible el botón "Agregar" en el costado superior derecho.


Fig 80 Detalle de de botones en listado de ítems de tabla.


Al seleccionar el botón "Editar" y/o "Agregar", aparecerá una ventana emergente con todos los campos que sea necesario modificar. Dependiendo del tipo de campos puede usarse elementos para visualizar como calendario, listas etc...



Fig 81 Ventana emergente que se forma al presionar el botón Editar/Agregar 





Otros botones puede realizar otras acciones especiales, en la imagen superior, el botón "CONTACTO"  detallará los contactos que pueda tener un determinado cliente. En este caso se emplea el elemento gráfico "PESTAÑA" para separar grupos de información.  En la siguiente imagen se aprecian tanto los niveles de detalle luego de seleccionar un determinado cliente, se muestra sus contactos. y se visualizan también las pestañas activos e inactivos.