>我有一个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()
中设置了断点(此方法使用与传递的 id 对应的Student
实例加载名为 bean
的属性),但从未命中该断点。
经过一段时间的思考,我开始理解为什么它不起作用。传递到详细信息页面的参数是 student.id
,但student
是<p:datatable/>
中用作显示所有学生的var
的名称,因此student
在<p:datatable/>
之外的<p:dialog/>
无效。
因此,我需要的是一种使用给定行中相应学生的 id 显示对话框的方法。理想情况下,我希望在这里进行ajax调用,因此只有在ned时才会加载详细信息。
有什么想法吗?
该按钮应该是一个 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
豆子里有这个:
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的呈现属性和可见属性之间的差异>
- 如何仅在完成表单提交时显示对话框