Question Modèles graphiques pour éditer des données avec une relation plusieurs-à-plusieurs


Je suis souvent confronté à une situation où j'ai besoin d'une interface graphique pour éditer des données ayant une relation n: m. Je cherche des idées d'interface utilisateur conviviales.

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

Habituellement, l'interface graphique ressemble à quelque chose comme ceci:


Grid that shows all items from table1 

Ajouter un objet table3 ...  (montre la fenêtre modale avec les éléments de table3)


Grid that shows all items from table3


Une fois que l'utilisateur a choisi un élément de table3, j'ajoute une nouvelle ligne à la table2 et rafraîchit les grilles.

Désavantages:

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

Ma question:

Est-ce que quelqu'un connaît un meilleur moyen de parcourir et de modifier visuellement les données ayant une relation n: m? Ou des modèles sympas que je pourrais "voler" à partir de logiciels existants?


26
2017-10-21 13:20


origine


Réponses:


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 X et le tableau 3 correspond à l'axe Y).

Vous pouvez probablement le faire pour des jeux de données table1 / 3 plus importants tant que vous autorisez les utilisateurs à filtrer ou à limiter les valeurs affichées sur les axes x et y.

Solution 2 

Pour citer de cette page, "Une relation plusieurs-à-plusieurs est en réalité deux relations un-à-plusieurs avec une table de jonction / lien".

En tant que solution, vous pouvez, en tant que solution unique, simplement prendre votre propre solution et résoudre vos 2 premiers désavantages en ayant des écrans / boîtes de dialogue pour la table 1 => 3 ainsi que 3 => 1.

Pas une solution parfaite mais fournit au moins toutes les fonctionnalités nécessaires

Solution 3 

Un peu semblable à votre propre solution:

  1. Afficher un tableau basé sur table1, avec:

    B. col1 contenant des éléments table1

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

    La liste peut être horizontale s'il y a généralement peu d'éléments associés ou verticale (défilable) si elle est horizontale ou trop large.

    La partie importante est que chaque élément affiché de la table 3 comporte une icône "supprimer" (x) à côté de lui pour permettre une suppression rapide.

  2. Permet de choisir quel élément de table1 vous souhaitez ajouter des mappages.

    Il y a deux façons de le faire: ajouter une case à cocher à chaque ligne de votre tableau et un bouton intitulé "Ajouter des relations aux lignes sélectionnées" (la formulation doit être améliorée), ou simplement 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 exactement le même ensemble d'éléments de table3 à plusieurs lignes de table1.

  3. Lorsque vous cliquez sur le bouton / lien "Ajouter", vous affichez une liste multi-sélection d'éléments filtrables à partir du tableau 3, avec le bouton "Ajouter sélectionné".

  4. Comme dans votre solution (voir mon # 2), ceci est symétrique, vous devez donc implémenter une interface utilisateur miroir pour mapper de table3 à table1 si nécessaire.


4
2017-10-21 13:26



C'est une vieille question, mais comme j'ai à nouveau fait face au même problème tout à l'heure, j'ai trouvé ceci:

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

Lorsque vous sélectionnez un élément dans grid1, grid1 devient actif et tous les éléments de l'autre grille comportent des cases à cocher s'ils sont associés à l'élément sélectionné.

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

La partie de filtrage est facilitée sur la base du bouton inline décrit à l’étape 4.

Je crois que cette solution satisferait toutes vos exigences.


2
2017-08-11 09:13



Voici une solution possible, donnée sous la forme d'une relation m-m employés-à-projets. Chaque employé peut travailler sur de nombreux projets, chaque projet pouvant impliquer de nombreux employés.

De gauche à droite, vous montrez ce qui suit:

Un panneau indiquant les détails de l'employé actuellement sélectionné.

Une liste de tous les employés, où chaque élément de la liste affiche le nom de l'employé en tant que lien ou bouton cliquable (pour afficher les détails dans le panneau de détails). En tête de la liste se trouve un bouton à bascule qui filtre la liste des projets uniquement avec ceux associés à l'employé sélectionné. Au bas de la liste se trouve un bouton pour 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 bouton "Lien" permettant à l'utilisateur de lier l'employé actuellement sélectionné au projet actuellement sélectionné. En cliquant sur ce bouton, vous ouvrez une boîte de dialogue permettant à l’utilisateur de saisir les détails du lien (c.-à-d. Combien de temps l’employé est affecté, quel rôle l’eployee jouera, etc.).

Une liste de tous les projets, où chaque élément de la liste affiche le nom du projet en tant que lien ou bouton cliquable (pour afficher des détails dans le panneau de détails). En tête de liste se trouve un bouton à bascule qui filtre la liste des employés à ceux associés au projet actuellement sélectionné. Au bas de la liste se trouve un bouton pour ajouter un nouveau projet, qui affiche un panneau de détails vide prêt à accepter les entrées.

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

De toute évidence, vous devez limiter la taille des panneaux de détails, peut-être en affichant uniquement les détails relatifs à 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 supprimer complètement le panneau de détails si vous êtes principalement intéressé par la gestion des liens. Cette interface utilisateur fonctionnerait très bien sur les écrans d'aspect large.

HTH! Klay


1
2017-10-21 16:01



Permettez-moi d'utiliser l'exemple de relation Un client a 0 ou plusieurs commandes. Si l'utilisateur veut voir les commandes d'un formulaire particulier, je suggérerais 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 ayant les critères de recherche pour filtrer sur
  3. L'utilisateur remplit les critères de recherche et appuie sur le bouton Rechercher
  4. Le système présente une liste du client ... selon les critères correspondants
  5. L'utilisateur frappe le bouton Ouvrir devant un client
  6. Le système présente le client (page totalement nouvelle avec le bouton "Retour à la recherche")

La nouvelle page comporte 3 panneaux - 1 panneau pour les détails du client, le deuxième panneau pour la liste des commandes et 3 panneaux qui sont renseignés lors du clic sur une commande. Si le nombre de commandes est supérieur à 20, je placerais un lien Commandes de recherche qui renvoie à un tout nouveau formulaire de recherche pour les commandes avec un élément CustomerId prédéfini, défini avec le paramètre CustomerId sélectionné.


0
2017-10-16 15:41