Patrones de GUI para editar datos con una relación de muchos a muchos

Question

A menudo me encuentro con una situación en la que necesito crear una GUI para editar datos que tienen una relación n: m. Estoy buscando ideas de GUI fáciles de usar.

[table1]
   |
  /|\
[table2]
  \|/
   |
[table3]

Por lo general, la GUI se parece a algo como esto:

---

Cuadrícula que muestra todos los elementos de la tabla1

Añadir elemento table3 ... _{(muestra la ventana modal con elementos table3)}

---

Cuadrícula que muestra todos los elementos de la tabla3

---

Después de que el usuario eligió un elemento de table3, agrego una nueva fila a table2 y actualizo las cuadrículas.

Desventajas :

• Solo puede agregar elementos table3 a table1, y no al revés;
• Solo puede examinar elementos de tabla1 y ver elementos de tabla3 relacionados;
• Necesito tener una cuadrícula filtrada de elementos de table3 y otra similar para elegir nuevos elementos;

Mi pregunta:

¿Alguien sabe una mejor manera de navegar visualmente y editar datos que tengan una relación n: m? O cualquier patrón agradable que pudiera "robar" de los paquetes de software existentes?

Answer 1

Solución 1

Si los conjuntos de datos no son demasiado grandes, use una tabla y permita a los usuarios colocar controles en las celdas (la tabla 1 es el eje X y la tabla 3 es el eje Y).

Probablemente pueda hacer esto para conjuntos de datos de tabla / 1/3 más grandes siempre que permita a los usuarios filtrar o limitar los valores que se muestran en los ejes x e y.

Solución 2

Para citar de esta página , " Una relación de muchos a muchos es realmente dos relaciones uno a muchos con una tabla de unión / enlace " ;.

Como tal, puede, como una solución, simplemente tomar su propia solución y resolver sus 2 primeras desventajas al tener pantallas / cuadros de diálogo para ir a la tabla 1 = > 3 así como a 3 = > 1.

No es una solución perfecta pero al menos proporciona toda la funcionalidad necesaria

Solución 3

Algo similar a su propia solución:

1. Mostrar una tabla basada en la tabla1, con:

   B. col1 que contiene elementos table1

   C. col2 que contiene una lista de todos los elementos de la tabla3 ya asociados con este elemento de la tabla1.

   La lista puede ser horizontal si generalmente hay pocos elementos asociados, o vertical (desplazable) si es horizontal o demasiado ancha.

   La parte importante es que cada elemento visualizado de la tabla 3 tiene un " eliminar " icono (x) al lado para permitir la eliminación rápida.

2. Permitir elegir a qué elemento de la tabla1 desea agregar asignaciones.

   Hay 2 formas de hacerlo: agregue una casilla de verificación a cada fila de la tabla y haga que un botón etiquete " agregue relaciones a las filas seleccionadas " (la redacción necesita mejorar), o simplemente tener una columna 3-rd en la tabla, que contiene botón / enlace para agregar relaciones a esa fila individual.

   La primera es una buena idea si es probable que el usuario a menudo agregue exactamente el mismo conjunto de elementos de la tabla3 a varias filas de la tabla1.

3. Cuando " Añadir " se hace clic en el botón / enlace, muestra una lista de selección múltiple filtrable de elementos de la tabla 3, con "agregar seleccionado" botón.

4. Como en su solución (vea mi # 2), esto es simétrico, por lo que debe implementar una interfaz de usuario espejo para mapear de la tabla3 a la tabla1 si es necesario.

Answer 2

Esta es una vieja pregunta, pero cuando enfrenté el mismo problema nuevamente en este momento, se me ocurrió esto:

1. 2 cuadrículas, una al lado de la otra, que muestran los elementos table1 y table3, con paginación, si es necesario.
2. Ambas cuadrículas tienen una barra de herramientas superior que permite filtrar por un valor de la tabla opuesta. Dependiendo de sus datos y su marco de interfaz gráfica de usuario, puede ser una cuadrícula combinada desplegable o una entrada de texto de autocompletar.
3. Ambas cuadrículas tienen casillas de verificación (última o primera columna)
4. Ambas cuadrículas contienen un botón / acción en línea en cada fila, para filtrar automáticamente la otra cuadrícula en ese elemento.
5. Solo se muestra / marca una cuadrícula como " activa " o "maestro" en cualquier momento (para dejar en claro al usuario, qué lado de la relación está viendo / controlando).

Cuando selecciona un elemento en la cuadrícula1, la cuadrícula1 se activa y todos los elementos de la otra cuadrícula tienen casillas de verificación marcadas si están asociadas con el elemento seleccionado.

Viceversa, cuando selecciona un elemento en grid2 (tabla3), grid2 se activa, todas las casillas de verificación en grid2 están en blanco (o atenuadas) y las casillas de verificación en grid1 indican una asociación con el elemento seleccionado.

La parte de filtrado se hace más fácil según el botón en línea descrito en el paso 4.

Creo que esta solución satisfaría todos sus requisitos.

Answer 3

Aquí hay una posible solución, dada en forma de una relación m: m de empleados a proyectos. Cada empleado puede trabajar en muchos proyectos, cada proyecto puede involucrar a muchos empleados.

De izquierda a derecha, muestra lo siguiente:

Un panel que muestra los detalles del empleado actualmente seleccionado.

Una lista de todos los empleados, donde cada elemento de la lista muestra el nombre del empleado como un enlace o botón en el que se puede hacer clic (para mostrar detalles en el panel de detalles). En la parte superior de la lista hay un botón de alternar que filtra la lista de proyectos solo a aquellos asociados con el empleado actualmente seleccionado. Al pie de la lista hay un botón para agregar un nuevo empleado, que muestra un panel de detalles vacío listo para aceptar entradas.

Un espacio vertical en el medio con un único " Enlace " botón que permite al usuario vincular al empleado seleccionado actualmente con el proyecto seleccionado actualmente. Al hacer clic en este botón, se abrirá un cuadro de diálogo que permitirá al usuario ingresar detalles del enlace (es decir, cuánto tiempo se le asignará al empleado, qué papel desempeñará el empleado, etc.).

Una lista de todos los proyectos, donde cada elemento de la lista muestra el nombre del proyecto como un enlace o botón en el que se puede hacer clic (para mostrar detalles en el panel de detalles). En la parte superior de la lista hay un botón de alternar que filtra la lista de empleados solo a aquellos asociados con el proyecto seleccionado actualmente. Al pie de la lista hay un botón para agregar un nuevo proyecto, que muestra un panel de detalles vacío listo para aceptar entradas.

Un panel que muestra los detalles del proyecto seleccionado actualmente.

Obviamente, tendría que limitar el tamaño de los paneles de detalles, tal vez solo mostrando los detalles relevantes para la relación m: m. Incluso puede agregar un botón en el panel de detalles para abrir una ventana emergente más detallada, o puede eliminar por completo el panel de detalles, si está interesado principalmente en administrar los enlaces. Esta interfaz de usuario funcionaría realmente bien en pantallas de aspecto amplio.

HTH! Klay

Answer 4

Permítanme usar el ejemplo de relación Un cliente tiene 0 o muchos pedidos. Si el usuario desea ver los pedidos de forma particular, sugeriría el siguiente caso de uso:

1. El usuario hace clic en el enlace Buscar cliente:
2. El sistema presenta el formulario de búsqueda de clientes con los criterios de búsqueda para filtrar
3. El usuario llena los criterios de búsqueda y presiona el botón Buscar
4. El Sistema presenta una lista del Cliente ... según los criterios coincidentes
5. El usuario presiona el botón Abrir frente a Un cliente
6. El Sistema presenta al Cliente (en una página totalmente nueva con "Volver al botón de búsqueda")

La nueva página tiene 3 paneles: 1 panel para Detalles del cliente, segundo Panel para la lista de Pedidos y 3 paneles que se rellenan cuando se hace clic en un Pedido. Si el número de pedidos es superior a 20, pondría un enlace Buscar pedidos que guía a un formulario de búsqueda completamente nuevo para pedidos con un CustomerId predefinido fijado con el CustomerId actual seleccionado.