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

Question

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

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

Por lo general, la interfaz gráfica de usuario se parece a algo como esto:

---

Grid that shows all items from table1

Añadir elemento cuadro3 ... _{(muestra ventana modal con los objetos Tabla 3)}

---

Grid that shows all items from table3

---

vez que el usuario escogió un elemento cuadro3, puedo añadir una nueva fila a tabla2 y refrescar las rejillas.

Desventajas:

• Sólo se pueden agregar elementos Tabla 3 a la Tabla 1, y no al revés;
• Solo puede examinar los elementos de la tabla1 y ver los elementos relacionados de la tabla3;
• Necesito tener una grilla filtrada de elementos de tabla3, y uno similar para elegir nuevos elementos;

Mi pregunta:

¿Alguien sabe una mejor manera de navegar visualmente y editar los datos que tiene un n: m relación? ¿O algún patrón agradable que pueda "robar" de los paquetes de software existentes?

Answer 1

Solución 1

Si los conjuntos de datos no son demasiado grandes, utilizar una tabla y permiten a los usuarios realizar comprobaciones en las células (tabla 1 es el eje X y Tabla 3 es el eje Y).

Probablemente pueda hacer esto para conjuntos de datos table1/3 más grandes, siempre y cuando permita a los usuarios filtrar o limitar qué valores se muestran en los ejes x e y.

Solución 2

citar this page, "Una relación muchos-a-muchos es en realidad dos relaciones uno a varios con una tabla de unión/link".

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

No

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

Solución 3

Algo similar a su propia solución:

1. muestran una tabla basada en la Tabla 1, con :

   B. col1 que contiene elementos table1

   C. col2 que contiene una lista de todos los elementos de la tabla 3 ya asociada con este elemento de la tabla1.

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

   La parte importante es que cada elemento mostrado de la tabla 3 tiene un ícono de "eliminar" (x) al lado para permitir su eliminación rápidamente.

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

   Hay dos maneras de hacerlo: agregue una casilla de verificación a cada fila de la tabla y tenga un botón etiquetado como "agregar relaciones con las filas seleccionadas" (la redacción necesita mejoras), o simplemente tener una columna de 3 er en la tabla, que contiene el botón/enlace para agregar relaciones a esa fila individual.

   La primera es una buena idea si el usuario suele agregar exactamente el mismo conjunto de elementos de la tabla3 a varias filas de la tabla1.

3. Cuando se hace clic en el botón/enlace "Agregar", se visualiza una lista de selección múltiple filtrable de la tabla 3, con el botón "agregar selecció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 table3 a table1 si es necesario.

Answer 2

Aquí hay una posible solución, dada en la 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, se ha representado lo siguiente:

Un panel que muestra los detalles del empleado seleccionado en ese momento.

Una lista de todos los empleados, donde cada elemento de la lista muestra el nombre del empleado como un enlace o botón seleccionable (para mostrar detalles en el panel de detalles). A la cabeza de la lista hay un botón para alternar que filtra la lista de proyectos solo a aquellos asociados con el empleado seleccionado actualmente. 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 la entrada.

Un espacio vertical en el centro con un solo botón "Enlace" 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 permite al usuario ingresar detalles del enlace (es decir, por cuánto tiempo se le asigna al empleado, qué papel jugará el usuario eployee, etc.).

Una lista de todos los proyectos, donde cada elemento de la lista muestra el nombre del proyecto como un enlace o botón que se pulse (para mostrar los detalles en el panel de detalle). En la cabecera de la lista hay un botón para alternar que filtra la lista de empleados a solo 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 la entrada.

Un panel que muestra los detalles del proyecto seleccionado en ese momento.

Obviamente, habría que limitar el tamaño de los paneles de detalles, tal vez mostrando sólo los datos relevantes para el m: relación m. Incluso puede agregar un botón en el panel de detalles para abrir una ventana emergente más detallada, o puede eliminar el panel de detalles si está interesado principalmente en administrar los enlaces. Esta UI funcionaría muy bien en pantallas de aspecto ancho.

HTH! Klay

Answer 3

Permítanme utilizar el cliente que individualmente 0 ó muchas Órdenes ejemplo relación. Si el usuario quiere ver las Órdenes de forma particular que sugeriría el siguiente caso de uso:

1. hace clic en el usuario el enlace de búsqueda de clientes:
2. El sistema presenta el Formulario de búsqueda de atención al cliente que tenga los criterios de búsqueda para filtrar el
3. el usuario llena los criterios de búsqueda y pulsa el botón de búsqueda
4. el sistema presenta una lista del cliente ... por los criterios coincidentes
5. el usuario pulsa el botón Abrir en la parte delantera de 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 obtiene poblado cuando se hace clic en una orden. Si el número de pedidos es superior a 20 me pongo un enlace Pedidos de búsqueda que guía al totalmente nuevo en la web Busca pedidos con un CustomerId predefinido fijo con el CustomerId actual seleccionada.

Answer 4

Ésta es una cuestión de edad, pero a medida que me enfrenté al mismo problema de nuevo justo ahora, me encontré con esto:

1. 2 rejillas, al lado del otro, que muestran elementos tabla1 y Tabla 3, la paginación, si necesario.
2. Ambas rejillas tienen una barra de herramientas superior, que permite el filtrado por un valor de la tabla opuesta. Dependiendo de sus datos y su marco de trabajo de interfaz gráfica de usuario, puede ser una cuadrícula desplegable desplegable o una entrada de texto de autocompletar.
3. Ambas rejillas tienen casillas de verificación (última o primera columna)
4. Ambas rejillas contienen un botón/acción en línea en cada fila, para filtrar automáticamente la otra rejilla en ese elemento.
5. Solo una cuadrícula se muestra/marca como "activa" o "maestra" en un momento dado (para aclararle al usuario, a qué lado de la relación están viendo/controlando).

Cuando selecciona un elemento en la grilla1, la grilla1 se activa y todos los elementos en la otra grilla tienen casillas marcadas si están asociadas con el ítem seleccionado.

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

La parte de filtrado se hace más fácil con base en el botón de línea se describe en el paso 4.

Creo que esta solución podría satisfacer todas sus necesidades.