如何在 p:dialog 中显示 p:dataTable 当前行的详细信息并在保存后更新 [英] How to show details of current row from p:dataTable in a p:dialog and update after save
问题描述
我有一个 JSF 2 应用程序,它有两页,一页列出学生,另一页显示给定学生的详细信息.列表页面在学生表的每一行中都有一个指向详细信息页面的链接,点击后会在浏览器中打开一个新选项卡以显示这些详细信息.
I have a JSF 2 application that has two pages, one to list students and one to show details of a given student. The listing page has a link to the details page in each row of the students table, that opens a new tab in browser to show those details, when clicked.
现在要求更改为不再在新选项卡中显示详细信息,而是在列表页面的模式对话框中显示.
Now the requirements changed to no more show details in a new tab, but in a modal dialog in the listing page.
我的想法是简单地将详细信息页面内容嵌入到模态对话框中,这样列表页面就不会变得太大而难以维护.这里开始我的怀疑.经过一番研究,我将列表每一行中的链接更改为以下按钮:
My idea is to simply embed the details page content in the modal dialog so the listing page will not get too big and hard to maintain. Here start my doubts. After some research I changed the link in each row of the listing to the following button:
<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>
最后,详细信息页面变成了这样:
Finally, the details page was changed to be something like this:
<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>
当我单击按钮时,对话框真正显示,内容是详细信息页面.我在对话框中看到以下内容:
When I click the button, the dialog really shows and the content is the details page. I see the following content in the dialog:
Details of /
完全没有错误,但应该显示的数据却没有.在 StudentBean.setId()
中设置了断点(此方法加载名为 bean
的属性,并带有与传递的 id 对应的 Student
实例)但是它永远不会被击中.
No errors at all, but the data that should be shown, isn't. A breakpoint was set in StudentBean.setId()
(this method loads a property named bean
with the Student
instance corresponding to the passed id) but it is never hit.
经过一段时间的思考,我开始明白为什么它不起作用.传递给详情页的参数是student.id
,但student
是<p中用作
显示所有学生,因此 var
的名称:datatable/>student
在
中无效,它在 之外<p:datatable/>
.
After some time thinking about it, I came to understand why it does not work. The parameter passed to the details page is student.id
, but student
is the name used as the var
in the <p:datatable/>
that show all the students, so student
is not valid in <p:dialog/>
which is outside the <p:datatable/>
.
所以,我需要的是一种使用给定行中相应学生的 id 显示对话框的方法.理想情况下,我希望在这里进行 ajax 调用,以便仅在需要时加载详细信息.
So, what I need is a way to show the dialog using the id of the corresponding student in a given row. Ideally, I would like an ajax call here, so the details would loaded only when neded.
有什么想法吗?
推荐答案
按钮应该是一个ajax按钮,在bean中设置当前迭代的实体,然后更新对话框的内容,最后显示出来.该对话框应该只引用 bean 中的实体,并在保存时更新列表和表.将对话框置于主窗体之外并且它有自己的窗体是非常重要的.
The button should be an ajax button which sets the currently iterated entity in the bean, and then updates the dialog's content, and finally shows it. The dialog should just reference that entity in the bean and update the list and table on save. It's very important that dialog is placed outside the main form and that it has its own form.
这是一个启动示例:
<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 中使用它:
With this inside a @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> 的呈现属性和可见属性之间的差异;
- 如何仅显示对话框成功完成表单提交后
这篇关于如何在 p:dialog 中显示 p:dataTable 当前行的详细信息并在保存后更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!