如何在 ap:dialog 中顯示 p:dataTable 中當前行的詳細信息並在保存后更新

Question

我有一個 JSF 2 應用程序，它有兩頁，一頁列出學生，另一頁顯示給定學生的詳細信息。 列表頁面在學生表的每一行中都有一個指向詳細信息頁面的鏈接，單擊該鏈接會在瀏覽器中打開一個新選項卡以顯示這些詳細信息。

現在要求更改為不再在新選項卡中顯示詳細信息，而是在列表頁面的模式對話框中顯示。

我的想法是簡單地將詳細信息頁面內容嵌入到模態對話框中，這樣列表頁面就不會變得太大而難以維護。 這里開始我的懷疑。 經過一番研究，我將列表每一行中的鏈接更改為以下按鈕：

<p:commandButton value="Details" type="button"
                 onclick="PF('dialog-details').show()">
</p:commandButton>

該對話框聲明如下：

<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
    <ui:include src="student_details.xhtml">
        <ui:param name="id" value="#{student.id}"/>
    </ui:include>
</p:dialog>

最后，詳細信息頁面更改為如下所示：

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <f:metadata>
        <f:viewParam name="id" value="#{studentBean.id}" />
    </f:metadata>

    <h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>                       

當我單擊按鈕時，對話框真正顯示，內容是詳細信息頁面。 我在對話框中看到以下內容：

Details of  / 

根本沒有錯誤，但應該顯示的數據卻沒有。 在StudentBean.setId()設置了一個斷點（此方法加載名為bean的屬性，其中包含與傳遞的 id 對應的Student實例），但它從未被命中。

經過一段時間的思考，我開始理解為什么它不起作用。 傳遞給詳細信息頁面的參數是student.id ，但student是用作顯示所有學生的<p:datatable/>中的var的名稱，因此student在外部的<p:dialog/>無效<p:datatable/> 。

所以，我需要的是一種使用給定行中相應學生的 id 顯示對話框的方法。 理想情況下，我希望在這里進行 ajax 調用，因此只有在需要時才會加載詳細信息。

有任何想法嗎？

Answer 1

該按鈕應該是一個ajax按鈕，它在bean中設置當前迭代的實體，然后更新對話框的內容，最后顯示它。 對話框應該只引用 bean 中的實體，並在保存時更新列表和表。 將對話框放在主窗體之外並且它有自己的窗體是非常重要的。

這是一個啟動示例：

<h:form id="master">
    <p:dataTable value="#{bean.entities}" var="entity">
        <p:column>#{entity.property1}</p:column>
        <p:column>#{entity.property2}</p:column>
        <p:column>#{entity.property3}</p:column>
        ...
        <p:column>
            <p:commandButton value="View" action="#{bean.setEntity(entity)}" 
                update=":detail" oncomplete="PF('detail').show()" />
        </p:column>
    </p:dataTable>
</h:form>

<p:dialog id="detail" widgetVar="detail">
    <h:form>
        <p:inputText value="#{bean.entity.property1}" />
        <p:inputText value="#{bean.entity.property2}" />
        <p:inputText value="#{bean.entity.property3}" />
        ...
        <p:button value="Close" onclick="PF('detail').hide(); return false" />
        <p:commandButton value="Save" action="#{bean.save}" 
            update=":master" oncomplete="if(!args.validationFailed) PF('detail').hide()" />
    </h:form>
</p:dialog>

在@ViewScoped bean 中使用它：

private List<Entity> entities; // +getter
private Entity entity; // +getter+setter

@EJB
private EntityService entityService;

@PostConstruct
public void load() {
    entities = entityService.list();
    entity = null;
}

public void save() {
    entityService.save(entity);
    load();
}

也可以看看：

• 為實體創建主從頁面、如何鏈接它們以及選擇哪個 bean 范圍
• 創建主從表和對話框，如何重用相同的對話框進行創建和編輯
• 提交后發生驗證錯誤時保持 p:dialog 打開
• <p:dialog> 的渲染屬性和可見屬性的區別
• 如何僅在成功提交表單時顯示對話框