具有多对多关系的数据编辑GUI模式

Question

我经常遇到这样的情况，需要设计一个GUI来编辑具有n:m关系的数据。 我正在寻找用户友好的GUI设计想法。

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

通常，GUI的外观类似于：

---

显示来自table1的所有项目的网格

添加table3项... _{（显示带有table3项目的模态窗口）}

---

显示来自table3的所有项目的网格

---

用户选择了table3项目后，我将添加一个新行到table2并刷新网格。

缺点：

• 只能将table3项目添加到table1中，而不能反向操作；
• 只能浏览table1项目并查看相关的table3项目；
• 我需要一个筛选过的table3项目网格，并一个类似的网格以选择新项目；

我的问题：

是否有更好的方式可视化浏览和编辑具有n:m关系的数据？或者可以从现有软件包中“借鉴”的好的模式是什么？

- Wouter van Nifterick

---

好问题。我在这种问题上多次遇到过，并没有一个漂亮干净的解决方案 - 这总是取决于一些特定领域的微调。 - Simon P Stevens

+1，我同意。@Simon：你说得没错。即便如此，它也不容易。从数据方案自动生成 GUI 屏幕的一个很好的原因是很难的 :-) - neuro

Answer 1

解决方案1

如果数据集不太大，可以使用表格，允许用户在单元格中放置复选框（表1是X轴，表3是Y轴）。

只要允许用户过滤或以其他方式限制在x和y轴上显示的值，就可以对较大的table1/3数据集执行此操作。

解决方案2

引用此页面的话，“多对多关系实际上是具有联接/链接表的两个一对多关系”。

因此，作为一种解决方案，您可以采用自己的解决方案，并通过屏幕/对话框来解决前两个缺点，以便进行表1=>3和3=>1的转换。

这不是一个完美的解决方案，但至少提供了所有所需的功能。

解决方案3

与您自己的解决方案有些相似：

1. 显示基于table1的表格，其中：

   B. col1包含table1元素

   C. col2包含与此table1元素相关联的来自table3的所有元素的列表。

   如果通常关联的元素很少，则列表可以是水平的；如果水平太宽，则可以是垂直（可滚动）。

   重要的是，从table3显示的每个元素都有一个“删除”图标（x），以便快速删除。

2. 允许选择要向其添加映射的table1元素。

   有两种方法可以做到这一点-在您的表中的每一行中添加复选框，并具有标记为“将关系添加到选定行”的一个按钮（措辞需要改进）， 或者简单地在表中添加第三列，其中包含用于将关系添加到该单独行的按钮/链接。

   如果用户可能经常将table3的完全相同的元素集添加到table1的多行中，则前者是一个好主意。

3. 单击“添加”按钮/链接时，显示来自table3的可过滤多选列表，带有“添加所选”按钮。

4. 与您的解决方案一样（请参见我的＃2），这是非对称的，因此如果需要，您应该实现镜像UI以从table3映射到table1。

- DVK

Answer 2

这是一个旧问题，但我刚刚再次遇到同样的问题，因此想到了以下解决方法：

1. 两个网格，左右并排显示 table1 和 table3 的项目，如有必要，可进行分页。
2. 两个网格都有顶部工具栏，允许按相反表中的值进行筛选。根据您的数据和 GUI 框架，可以使用下拉组合网格或自动完成文本输入。
3. 两个网格都有复选框（最后或第一列）
4. 每行都包含一个内联按钮/操作，可自动在另一个网格上过滤该项。
5. 任何时候只显示/标记一个网格为“活动”或“主控”（以向用户明确他们正在查看/控制关系的哪一侧）。

当您在 grid1 中选择一个项目时，grid1 变为活动状态，并且如果它们与所选项目相关，则在另一个网格中的所有项目都有复选框被选中。 反之，当您在 grid2（table3）中选择一个项目时，grid2 变为活动状态，grid2 中的所有复选框为空白（或变暗），并且 grid1 中的复选框指示与所选项目的关联。 基于步骤 4 中描述的内联按钮，筛选部分变得更加容易。 我相信这个解决方案将满足您的所有要求。

- AsGoodAsItGets

---

+1 好主意，特别是有筛选框。灰色处理很巧妙。当你在编辑时，这基本上就是你会在脑海中想到的。 - Wouter van Nifterick

Answer 3

这里提供了一个可能的解决方案，以员工与项目之间的m:m关系形式给出。每个员工可以参与多个项目，每个项目可以涉及多个员工。

从左到右，您显示以下内容：

一个面板显示当前选定员工的详细信息。

所有员工的列表，列表中的每个项目都显示为可点击的链接或按钮（以在详细面板中显示详细信息）。列表的开头是一个切换按钮，用于将项目列表过滤为仅与当前选定员工相关联的项目。列表的底部是一个添加新员工的按钮，它会显示一个空的详细信息面板，准备接受输入。

中间有一个垂直空间，只有一个“链接”按钮，允许用户将当前选定的员工与当前选定的项目进行链接。单击此按钮将打开一个对话框，允许用户输入链接的详细信息（即分配给员工的时间长短，员工将扮演的角色等）。

一个项目列表，其中列表中的每个项目都显示为可点击的链接或按钮（以在详细面板中显示详细信息）。列表的开头是一个切换按钮，它将员工列表过滤为仅与当前选择的项目相关联的员工。列表底部有一个按钮，用于添加新项目，该按钮显示一个空的详细信息面板，准备接受输入。

显示当前选定项目详细信息的面板。

显然，您必须限制详细信息面板的大小，可能只显示与m:m关系相关的详细信息。您甚至可以在详细信息面板上添加一个按钮，以打开更详细的弹出窗口，或者如果您主要感兴趣的是管理链接，则可以完全取消详细信息面板。这种用户界面在宽屏幕上非常有效。

希望对您有所帮助！Klay

- Klay

---

Klay - 好的，我想我有些迟钝，这和原帖作者的解决方案有什么不同？ - DVK

我真的不确定如何评价OP的解决方案。也许“添加table3项”的框应该是一个“添加table2项”的框，这样会更容易理解。 - Klay

由于我不理解 OP 的解决方案应该如何工作，因此我不完全理解困难是如何产生的。将 table3 项“添加”到 table1 项（反之亦然）意味着什么？您只是在两者之间建立关联。由于关联（而非父子关系）是对称的，因此缺点1无效。 - Klay

缺点2可能是OP解决方案的产物，但在我的解决方案中浏览任一列表以查看另一个表中的相关成员也不是问题。我也不太明白缺点3：什么意思是“挑选新项目”？我假设OP的意思是“创建新项目”，这也可以在我的解决方案中实现。 - Klay

Answer 4

让我使用一个“一个客户拥有0个或多个订单”的关系示例。如果用户想查看特定表单的订单，我建议以下使用情况：

1. 用户点击“搜索客户”链接：
2. 系统呈现“搜索客户”表单，具有用于筛选的搜索条件
3. 用户填写搜索条件并点击“搜索”按钮
4. 系统呈现与匹配标准相符的客户列表......
5. 用户点击“A Customer”前面的“打开”按钮
6. 系统呈现客户（在完全新的页面上，带有“返回搜索按钮”）

新页面有3个面板-1面板用于客户详细信息，第2个面板用于订单列表，第3个面板在单击订单时会填充。如果订单数量大于20，则会放置一个“搜索订单”链接，该链接指导到具有当前选择的CustomerId固定值的订单的全新搜索表单。

- Yordan Georgiev