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

簡單的經驗法則我會適用的是，對於更長的列表數據表更容易使用。您可以應用過濾器並對錶格進行排序。挑選清單通常更適合較小的清單。

抓住一支筆，並畫出您正在考慮的佈局。我發現這是一種快速查看不同佈局思路的方法，可以幫助快速消除有問題的設計。