GUI模式以多对多关系编辑数据 [英] GUI patterns to edit data with many-to-many relationship
问题描述
我经常遇到这样的情况，我需要提供一个GUI来编辑具有n:m关系的数据.我正在寻找用户友好的GUI想法.
I often run into a situation where I need to come up with a GUI to edit data that has a n:m relationship. I'm looking for user friendly GUI ideas.
[table1]
|
/|\
[table2]
\|/
|
[table3]
通常，GUI类似于以下内容:
Usually the GUI resembles something like this:
Grid that shows all items from table1
添加table3项... (显示带有table3项的模式窗口)
Grid that shows all items from table3
用户选择了table3项目后，我向table2添加了新行并刷新了网格.
After the user picked a table3 item, I add a new row to table2 and refresh the grids.
缺点:
- 您只能将table3项添加到table1中，而不能相反；
- 您只能浏览table1项目并查看相关的table3项目；
- 我需要一个包含table3项的已过滤网格，并有一个类似的网格来选择新项；
我的问题:
有人知道一种更好的可视化浏览和编辑具有n:m关系的数据的方法吗? 还是我可以从现有软件包中窃取"的任何不错的模式?
Does anyone know a better way to visually browse and edit data that has a n:m relationship? Or any nice patterns that I could "steal" from existing software packages?
推荐答案
解决方案1
如果数据集不太大，请使用表格并允许用户在单元格中放置检查(表格1是X轴，表格3是Y轴).
If the data sets are not too big, use a table and allow users to place checks in cells (table 1 is X axis and table3 is Y axis).
您可以对较大的table1/3数据集执行此操作，只要允许用户过滤或限制在x和y轴上显示的值即可.
You can probably do this for larger table1/3 data sets as long as you allow users to filter or otherwise limit which values are displayed on x and y axis.
解决方案2
引用此页面，多对多关系确实是两个具有结点/链接表的一对多关系".
To quote from this page, "A many-to-many relationship is really two one-to-many relationships with a junction/link table".
这样，作为一个解决方案，您可以简单地采用自己的解决方案，并通过使屏幕/对话框进入表1 => 3和3 => 1来解决您的前两个缺点.
As such, you can, as one solution, simply take your own solution and resolve your first 2 dis-advantages by having screens/dialogs to go table 1=>3 as well as 3=>1.
这不是一个完美的解决方案，但至少提供了所有必需的功能
Not a perfect solution but at least provides all the needed functionality
解决方案3
有点类似于您自己的解决方案:
Somewhat similar to your own solution:
-
显示基于table1的表，并带有:
Show a table based on table1, with:
B.包含table1元素的col1
B. col1 containing table1 elements
C. col2包含来自table3的所有元素的列表，该列表已经与来自table1的该元素相关联.
C. col2 containing a list of all elements from table3 already associated with this element from table1.
如果通常关联的元素很少，则列表可以是水平的，如果水平到太宽，则列表可以是垂直的(可滚动的).
The list can be either horizontal if there are usually few elements associated, or vertical (scrollable) if horizontal to too wide.
重要的是，表3中每个显示的元素旁边都有一个删除"图标(x)，可以快速删除.
The important part is that every displayed element from table3 has a "delete" icon (x) next to it to allow removal quickly.
允许从table1中选择要将映射添加到的元素.
Allow choosing which element from table1 you want to add mappings to.
有两种方法可以执行此操作-在表的每一行中添加一个复选框，并使用一个标签为向选定行添加关系"的按钮(需要改进措词)， 或者在表格中仅包含第3列，其中包含用于向该单独的行添加关系的按钮/链接.
There are 2 ways of doing this - either add a checkbox to every row in your table, and have one button labeled "add relationships to selected rows" (wording needs improvement), or simply have a 3-rd column in the table, containing button/link for adding relationships to that individual row.
如果用户可能经常将table3中完全相同的元素集添加到table1中的几行中，那么前者是个好主意.
The former is a good idea if the user is likely to often add exactly the same set of element from table3 to several rows from table1.
单击添加"按钮/链接时，将显示表3中可过滤的多选元素列表，并带有添加选定的"按钮.
When "Add" button/link is clicked, you display a filterable multi-select list of elements from table3, with "add selected" button.
就像您的解决方案中一样(请参阅我的#2)，这是非对称的，因此您应该实现一个镜像UI，用于在需要时从table3映射到table1.
As in your solution (see my #2), this is a-symmetrical so you should implement a mirror UI for mapping from table3 to table1 if needed.
这篇关于GUI模式以多对多关系编辑数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
