如何在ap:对话框中显示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与Student传递的id对应的实例命名的属性),但它永远不会被命中.

经过一段时间的思考,我才明白为什么它不起作用.传递给详细信息页面的参数是student.id,但是在显示所有学生时student使用的名称,因此无效在其中.var<p:datatable/>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="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:对话框打开
• <p:dialog>的渲染属性和可见属性之间的差异
• 如何仅在完成成功的表单提交时显示对话框