Guía 85 – Relacionar 2 tablas de forma muy visual y rápida

Este ejemplo también lo he iniciado para ayudar a Rubén.
Me explicó que estaba diseñando un sistema de Gestión de Tesorería y que tenía que conciliar las previsiones de pago con los pagos reales, de cara a realizar las previsiones de saldos de sus cuentas corrientes a medio plazo.

Él imaginó un sistema que por arrastre de registros de un panel (de previsión)  a otro (pagos reales), se fueran cancelando los registros de previsión.

Si no queda clara esta explicación, os resumo, es relacionar unos registros de una tabla con otros registros de otra tabla, pero a ser posible de forma muy visual.

Objetivo

De forma muy visual, sencilla y rápida, relacionar registros de la tabla de previsión con los registros de la tabla de pagos reales.

En este caso, es para una gestión de Tesorería, pero puede usarse para multitud de situaciones, como:

  • Albaranes y facturas.
  • Facturas y movimientos bancarios de pagos.
  • Alumnos y clases.
  • Alumnos y asignaturas optativas.
  • Etc.

DEMO:  https://fhumanes.com/reconcile y https://fhumanes.com/reconcile2

Si estás interesado en este artículo sigue leyéndolo haciendo clic aquí.

Actualización 1/07/2024
Se ha hecho corrección en:

  • Cuando se produce error en sincronismo del orden de ejecución de los botones en ambos paneles en botón “Data Concile”, el proceso se resuelve automáticamente volviéndose a ejecutar, sin la intervención del usuario
  • En los botones del panel “REAL” se elimina el prefijo de la tabla, para que estos botones puedan estar dentro o fuera de la tabla, en dicho panel.
Ampliación 3/07/2024
Se ha ampliado la funcionalidad incluyendo un formulario de filtro sobre los paneles del DashBoard.

Esta nueva versión la he llamado “concile2”.
El formulario es una página ADD que se crea con una tabla ficticia. Creo que es una excelente alternativa  para filtrar las páginas de este tipo.

Guía 84 – Resaltar elementos en páginas LIST

Mi compañero Rubén, me pidió algunos ejemplos para resaltar celdas, filas,  columnas y agrupaciones de celdas, para información mostrada en páginas LIST y aunque puede haber multitud de formas de resaltar la información, yo he elegido 4 formas y he hecho este ejemplo para mostrárselas a él y a vosotros.

En casi todos los casos, el resaltado se produce cuando el ratón se posiciona encima de las celdas de la tabla del GRID. Ya conocéis que la función “hover” para los equipos que no disponen de un ratón, mejor no utilizarla.

Es un buen ejemplo de referencia cuando se requiera trabajar con JQUERY.

Objetivo:

Cuando una página LIST muestra muchas columnas, resulta poco claro la presentación por defecto, así pues estos ejemplos sirven para reforzar el interface y hacer más fácil la visualización de los datos.

He realizado 4 ejemplos:

  • versión 1.- Mostrar coordenadas X e Y (filas y columnas) coloreando el fondo de las celdas.
  • versión 2.- Hacer el rayado de tipo “cebra” en vertical y resaltar el registro seleccionado.
  • versión 3.- Hacer el rayado de acuerdo a las celdas agrupadas, para así identificar mejor la información de los grupos.
  • versión 4.- La misma representación que versión 1, pero en paginas LIST del tipo “maestro” y “detalle”.

DEMO: https://fhumanes.com/guia84/

Si estás interesado en este tema, sigue leyendo el articulo en este enlace.