PrimeFaces web应用程序的设计

Question

首先，我知道这个问题可能被认为是与StackOverflow相关的离题。如果是，请告诉它在StackExchange网站内更适合的位置。

我需要为以下（简单）情况开发一个简单但完整的用户界面：处理多个用户参加一系列事件。此应用程序的目标用户是超级用户，即需要监视和统计每个用户参与的事件数量以及参与事件的用户数量的人员。超级用户应该能够对用户，事件，出席者进行任何类型的CRUD操作。

db结构由表组成：用户，事件，出勤。

用户具有出勤一个OneToMany关系：一个用户被链接到许多出勤。

事件与出席一个OneToMany关系。

我认为布局如下（使用PrimeFaces小部件）：带有2个选项卡的TabView：用户和事件。每个标签显示其所有类型的记录，通过DataTables使用LazyLoading，对每列进行过滤和排序。

每个DataTable都具有附加列，其中包含用于编辑 - 删除操作的按钮。此外，用户表中的附加列还包含一个“查看事件”按钮，用于查看与该用户相关的事件。以一种镜面的方式，“查看用户”按钮出现在事件表中。

“查看事件”按钮将打开一个模式对话框，其中包含另一个DataTable以及与用户相关的事件。

问题出在：让超级用户更新与选定用户相关的事件列表的合理方法是什么？我是否应该用一个显示关系的单选按钮显示所有事件，包括那些不相关的事件？或者我应该只显示相关事件？超级用户将如何添加新的相关事件？我是否需要另一个DataTable来显示尚未关联的事件？或者我应该使用PickList？如果使用PickList，当列表很长时会发生什么？我在PickList组件中看不到分页或过滤功能。

Answer 1

Primefaces pickList增加scroll如果它不适合在parent component内。但用于大型数据集效率不高。改为使用dataTables。但是@Nphphibian已经说过了。

我们的设计：

有Users和Events在分离tabs还是不错的。如果我是你，我会在每个标签内放置3 dataTables，例如为User标签我有这些：

• 所有用户
• 活动相关特定User
• 所有活动

只有所有用户dataTable（与multiselection ）woul d在标签的最初打开时可见。

这table必须控制研究buttons在footer将管理的另外2 tables表现，例如： “RelatedEvents”， “AssignToEvent ”和“ ADDUSER” buttons。

点击 “RelatedEvents” 的相关活动dataTable将被示出（例如用jQuery处理它）之后。 在这table将全部Events有关从所选User从所有用户表。在这里，您可以管理“取消分配”的User从事件，“更新”的特别Event，也当然（再次jQuery的）“隐藏”这table。

后点击 “AssignToEvent” 的所有事件dataTable会显示（jQuery的）。 在此table将全部存在Events。在这里，你会选择特定的Event，然后选择Users从“确认分配”所有用户选定Event。它还将包含“隐藏”按钮。

Event选项卡的类似方法。由于dataTable具有很多优点，如筛选，排序，行排序等，所以它是最好的选择。

这样你就可以让超级用户浏览所有Users并对其进行编辑，而不必让所有的tables都可见，还可以让他在2次点击中管理所有内容。（相同的事件）

这些只是我的想法。也许它会以某种方式启发你。

Answer 2

简单的经验法则我会适用的是，对于更长的列表数据表更容易使用。您可以应用过滤器并对表格进行排序。挑选清单通常更适合较小的清单。

抓住一支笔，并画出您正在考虑的布局。我发现这是一种快速查看不同布局思路的方法，可以帮助快速消除有问题的设计。