Modèles d'interface graphique permettant de modifier des données avec des relations plusieurs à plusieurs

Question

Je rencontre souvent une situation où il me faut une interface graphique pour éditer des données ayant une relation n: m. Je recherche des idées d’interface graphique conviviales.

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

Habituellement, l'interface graphique ressemble à ceci:

Grille affichant tous les éléments de la table1

Ajouter un élément de la table3 ... _{(affiche la fenêtre modale avec les éléments de la table3)}

Grille affichant tous les éléments de la table3

Après que l'utilisateur a sélectionné un élément de la table3, j'ajoute une nouvelle ligne à la table2 et actualise les grilles.

Inconvénients:

• Vous pouvez uniquement ajouter des éléments table3 à table1, et non l'inverse.
• Vous pouvez uniquement parcourir les éléments de la table1 et voir les éléments connexes de la table3;
• J'ai besoin d'une grille filtrée d'éléments table3 et d'une grille similaire pour sélectionner de nouveaux éléments;

Ma question:

Quelqu'un connaît-il un meilleur moyen de parcourir et d’éditer visuellement des données ayant une relation n: m? Ou tout autre motif que je pourrais "voler" à partir de logiciels existants?

Answer 1

Solution 1

Si les ensembles de données ne sont pas trop volumineux, utilisez un tableau et autorisez les utilisateurs à placer des contrôles dans les cellules (le tableau 1 correspond à l’axe des X et le tableau 3 à l’axe des Y).

Vous pouvez probablement le faire pour des ensembles de données table1 / 3 plus grands, à condition de permettre aux utilisateurs de filtrer ou de limiter les valeurs affichées sur les axes x et y.

Solution 2

Pour citer cette page , " Une relation plusieurs à plusieurs est vraiment deux relations un-à-plusieurs avec une table jonction / lien ".

En tant que tel, vous pouvez, en tant que solution, prendre simplement votre propre solution et résoudre vos deux premiers inconvénients en ayant des écrans / dialogues à afficher Table 1 = > 3 et 3 = > 1.

Ce n'est pas une solution parfaite mais au moins fournit toutes les fonctionnalités nécessaires

Solution 3

Un peu similaire à votre propre solution:

1. Afficher une table basée sur table1, avec:

   B. col1 contenant les éléments de table1

   C. col2 contenant une liste de tous les éléments de la table3 déjà associés à cet élément de la table1.

   La liste peut être horizontale si peu d’éléments sont généralement associés ou verticale (il est possible de la faire défiler) si elle est trop large.

   Ce qui est important, c’est que chaque élément affiché de la table 3 ait un " supprimer " l’icône (x) à côté pour permettre son retrait rapide.

2. Autorisez le choix de l'élément de la table 1 auquel vous souhaitez ajouter des mappages.

   Il existe deux façons de procéder: ajoutez une case à cocher à chaque ligne de votre tableau et affectez un bouton à la mention "ajouter des relations aux lignes sélectionnées". (le libellé doit être amélioré), ou simplement avoir une 3ème colonne dans la table, contenant le bouton / lien pour ajouter des relations à cette ligne individuelle.

   Le premier est une bonne idée si l'utilisateur est susceptible d'ajouter souvent le même ensemble d'éléments de table3 à plusieurs lignes de table1.

3. Quand " Ajouter " vous cliquez sur le bouton / le lien, vous affichez une liste d'éléments de table3 pouvant être filtrée et pouvant être filtrée, avec l'option "Ajouter la sélection". bouton.

4. Comme dans votre solution (voir mon n ° 2), il s'agit d'une symétrie, vous devez donc implémenter une interface utilisateur miroir pour le mappage de table3 à table1 si nécessaire.

Answer 2

C’est une vieille question, mais comme je faisais face au même problème tout à l’heure, j’ai eu ceci:

1. 2 grilles côte à côte, affichant les éléments table1 et table3, avec pagination si nécessaire.
2. Les deux grilles disposent d'une barre d'outils supérieure qui permet de filtrer en fonction d'une valeur de la table opposée. En fonction de vos données et de votre infrastructure graphique, il peut s’agir d’une grille déroulante déroulante ou d’une saisie de texte à remplissage automatique.
3. Les deux grilles ont des cases à cocher (dernière ou première colonne)
4. Les deux grilles contiennent un bouton / une action en ligne sur chaque ligne pour filtrer automatiquement l’autre grille de cet élément.
5. Une seule grille est affichée / marquée comme "active". ou " maître " à tout moment (pour indiquer clairement à l'utilisateur le côté de la relation qu'il visualise / contrôle).

Lorsque vous sélectionnez un élément dans la grille1, la grille1 devient active et tous les éléments de l'autre grille ont des cases à cocher cochées si elles sont associées à l'élément sélectionné.

Inversement, lorsque vous sélectionnez un élément dans grid2 (table3), grille2 devient actif, toutes les cases à cocher de grid2 sont vides (ou grisées) et les cases à cocher de grid1 indiquent une association avec l'élément sélectionné.

La partie filtrage est facilitée par le bouton en ligne décrit à l'étape 4.

Je pense que cette solution satisferait toutes vos exigences.

Answer 3

Voici une solution possible, présentée sous la forme d’une relation m: m entre employés et projets. Chaque employé peut travailler sur de nombreux projets, chaque projet peut impliquer de nombreux employés.

De gauche à droite, vous affichez les éléments suivants:

Un panneau affichant les détails de l’employé actuellement sélectionné.

Liste de tous les employés, où chaque élément de la liste affiche le nom de l’employé sous forme de lien ou de bouton sur lequel on peut cliquer (pour afficher les détails dans le panneau de détail). En tête de liste se trouve un bouton bascule qui filtre la liste des projets en fonction de ceux associés à l'employé actuellement sélectionné. Au bas de la liste se trouve un bouton permettant d'ajouter un nouvel employé, qui affiche un panneau de détails vide prêt à accepter les entrées.

Un espace vertical au milieu avec un seul "Lien". bouton permettant à l’utilisateur de lier l’employé actuellement sélectionné au projet actuellement sélectionné. Un clic sur ce bouton ouvrirait une boîte de dialogue permettant à l’utilisateur de saisir les détails du lien (c’est-à-dire combien de temps l’employé est affecté, quel rôle l’employé jouera, etc.).

Liste de tous les projets, où chaque élément de la liste affiche le nom du projet sous forme de lien ou de bouton sur lequel on peut cliquer (pour afficher les détails dans le panneau de détail). En tête de liste se trouve un bouton bascule permettant de filtrer la liste des employés en fonction de ceux associés au projet actuellement sélectionné. Au bas de la liste se trouve un bouton permettant d'ajouter un nouveau projet, qui affiche un panneau de détails vide prêt à accepter les entrées.

Un panneau affichant les détails du projet actuellement sélectionné.

Évidemment, il vous faudrait limiter la taille des panneaux de détails, peut-être en affichant uniquement les détails pertinents pour la relation m: m. Vous pouvez même ajouter un bouton sur le panneau de détails pour ouvrir une fenêtre contextuelle plus détaillée, ou vous pouvez supprimer complètement le panneau de détails si vous souhaitez principalement gérer les liens. Cette interface fonctionnerait très bien sur les écrans à grand angle.

HTH! Klay

Answer 4

Permettez-moi d'utiliser l'exemple de relation Un client a 0 ou plusieurs commandes. Si l'utilisateur veut voir les ordres de forme particulière, je suggère le cas d'utilisation suivant:

1. L'utilisateur clique sur le lien Rechercher un client:
2. Le système présente le formulaire de recherche de client avec les critères de recherche sur lesquels filtrer
3. L'utilisateur remplit les critères de recherche et appuie sur le bouton de recherche
4. Le système présente une liste des clients ... selon les critères correspondants
5. L'utilisateur appuie sur le bouton Ouvrir devant un client
6. Le système présente le client (dans une page totalement nouvelle avec le bouton "Retour au bouton de recherche")
.

La nouvelle page comporte 3 panneaux - 1 panneau pour les informations sur le client, le deuxième panneau pour la liste des commandes et le panneau 3 qui est rempli lorsque l'utilisateur clique sur une commande. Si le nombre de commandes est supérieur à 20, je placerais un lien de recherche de commandes indiquant un tout nouveau formulaire de recherche pour les commandes avec un CustomerId prédéfini, fixé avec le CustomerId actuel sélectionné.