代码之家 › 专栏 › 技术社区 › Wouter van Nifterick Andrey

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

many-to-many language-agnostic user-interface

Wouter van Nifterick Andrey · 技术社区 · 15 年前

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

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

通常,GUI类似于这样:

Grid that shows all items from table1

添加表3项… _{(显示带有表3项的模式窗口)}

Grid that shows all items from table3

在用户选择了Table3项之后,我向Table2添加了一个新行并刷新网格。

缺点:

我的问题:

有人知道一种更好的方法来可视化地浏览和编辑具有n:m关系的数据吗? 或者我可以从现有软件包中“窃取”任何好的模式?

4 回复 | 直到 9 年前

DVK 15 年前

解决方案1

如果数据集不太大,请使用表并允许用户在单元格中放置检查(表1是X轴,表3是Y轴)。

如果允许用户筛选或限制在X和Y轴上显示的值,则可以对较大的表1/3数据集执行此操作。

解决方案2

引述 this page “一个多对多关系实际上是一个连接/链接表中的两个一对多关系”。

因此,作为一个解决方案,您可以简单地采用自己的解决方案,并通过让屏幕/对话框转到表1=>3和表3=>1来解决前2个难题。

不是完美的解决方案,但至少提供了所有需要的功能

解决方案3

有点类似于您自己的解决方案:

显示基于表1的表,其中:

b.包含表1元素的第1列

c.col2包含表3中已与表1中的元素关联的所有元素的列表。

如果关联的元素通常很少,则列表可以是水平的;如果水平到太宽,则列表可以是垂直的(可滚动的)。

重要的是,表3中显示的每个元素旁边都有一个“删除”图标(X),以便快速删除。
允许从表1中选择要添加映射的元素。

有两种方法可以做到这一点——要么在表中的每一行添加一个复选框,然后用一个按钮标记“向所选行添加关系”(措辞需要改进)。或者只是在表中有一个第三列,其中包含用于向该行添加关系的按钮/链接。

如果用户经常从表3向表1的多行添加完全相同的元素集,那么前者是一个好主意。
单击“添加”按钮/链接时,将显示表3中的可筛选多选元素列表,其中包含“添加所选”按钮。
在您的解决方案中(请参见我的2),这是A对称的,因此如果需要,您应该实现从表3到表1的映射的镜像UI。

AsGoodAsItGets 9 年前

这是一个古老的问题,但当我刚刚再次面临同样的问题时,我想到了:

在网格1中选择一个项目时,网格1将变为活动状态,如果其他网格中的所有项目与所选项目关联,则会选中复选框。

反之亦然,当您在GRID2(表3)中选择一个项目时,GRID2变为活动状态,GRID2中的所有复选框都为空(或变暗),GRID1中的复选框表示与所选项目的关联。

根据步骤4中描述的内联按钮,过滤部分变得更容易。

我相信这个解决方案可以满足您的所有要求。

Klay 15 年前

这里有一个可能的解决方案,以雇员的形式提供给项目M:M关系。每个员工可以在许多项目上工作,每个项目可以涉及许多员工。

从左到右,显示以下内容:

显示当前所选员工详细信息的面板。

所有员工的列表,其中列表中的每个项目将员工的姓名显示为可单击的链接或按钮(在详细信息面板中显示详细信息)。列表的开头是一个切换按钮,它将项目列表筛选为仅与当前所选员工关联的项目列表。列表底部有一个按钮,用于添加新员工,该按钮显示一个空的详细信息面板,准备接受输入。

中间有一个垂直空间,只有一个“链接”按钮,允许用户将当前选定的员工与当前选定的项目链接起来。单击此按钮将打开一个对话框,允许用户输入链接的详细信息(即,分配员工的时间、eployee扮演的角色等)。

所有项目的列表,其中列表中的每个项目都将项目名称显示为可单击的链接或按钮(以在详细信息面板中显示详细信息)。在列表的顶部是一个切换按钮,它将员工列表筛选为仅与当前选定项目关联的员工列表。在列表的底部是一个添加新项目的按钮,它显示一个空的详细信息面板,准备接受输入。

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

显然,您必须限制细节面板的大小,也许只显示与m:m关系相关的细节。您甚至可以在详细信息面板上添加一个按钮来打开一个更详细的弹出窗口,或者如果您主要对管理链接感兴趣的话,可以完全取消详细信息面板。这个用户界面在宽方面的屏幕上工作得很好。

嗯!克莱

DarkSide 10 年前

让我使用一个客户有0个或多个订单关系示例。如果用户想要查看特定表单的订单,我建议使用以下用例:

新页面有3个面板-1个面板用于显示客户详细信息,第二个面板用于显示订单列表,3个面板在单击订单时填充。如果订单数大于20,我将放置一个搜索订单链接,该链接将引导到一个全新的订单搜索表单,其中包含一个预定义的客户ID,该客户ID已在当前选定的客户ID中固定。