如何从p：dataTable在p：对话框中显示当前行的详细信息，并保存后更新 [英] How to show details of current row from p:dataTable in a p:dialog and update after save
问题描述
现在要求更改为在新标签页中不再显示详细信息，但在列表页面中的模态对话框中。
我的想法是将详细信息页面内容简单地嵌入到模态对话框，所以列表页面不会变得太大，难以维护。这里开始我的疑惑经过一些研究，我将列表的每一行中的链接更改为以下按钮：
< p：commandButton value =详细信息type =button
onclick =PF（'dialog-details'）。show（）>
< / p：commandButton>
对话框声明如下：
< p：dialog widgetVar =dialog-detailsheader =Detailsmodal =truewidth =95％>
< ui：include src =student_details.xhtml>
< ui：param name =idvalue =＃{student.id}/>
< / ui：include>
< / p：dialog>
最后，详细信息页面更改为如下：
< ui：composition
xmlns =http://www.w3.org/1999/xhtmlxmlns：f =http： /java.sun.com/jsf/core
xmlns：p =http://primefaces.org/uixmlns：h =http://java.sun.com/jsf/html
xmlns：ui =http://java.sun.com/jsf/facelets>
< f：metadata>
< f：viewParam name =idvalue =＃{studentBean.id}/>
< / f：metadata>
< h1 class =title ui-widget-header ui-corner-all>＃{studentBean.bean.name} /＃{studentBean.bean.number}< / h1>
< / ui：composition>
当我点击按钮时，对话框将显示出来，内容是详细信息页面。我在对话框中看到以下内容：
/
根本没有错误，但应该显示的数据不是。在
StudentBean.setId（）中设置了一个断点（此方法加载名为bean的属性与Student对应于传递的id的实例），但它永远不会被击中。
经过一段时间的思考，我来了解为什么这是行不通的。传递给详细信息页面的参数是
student.id，但student是用作<$ c $在< p：datatable />中显示所有学生的c> var ，所以student在< p：datatable /> < p：dialog />中无效c $ c>。
所以，我需要的是使用给定行中相应学生的ID显示对话框的方法。理想情况下，我想在这里打一个ajax，所以细节只有在加载时才会加载。
任何想法？
解决方案按钮应该是一个ajax按钮，它设置bean中当前迭代的实体，然后更新对话框的内容，最后显示它。对话框应该仅仅引用bean中的实体，并在save上更新列表和表。
这是一个开始示例：
< 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 =Viewaction =＃{bean.setEntity（entity）}
update =：detailoncomplete =PF（'detail' />
< / p：column>
< / p：dataTable>
< / h：form>
< p：dialog id =detailwidgetVar =detail>
< h：form>
< p：inputText value =＃{bean.entity.property1}/>
< p：inputText value =＃{bean.entity.property2}/>
< p：inputText value =＃{bean.entity.property3}/>
...
< p：button value =Closeonclick =PF（'detail'）。hide（）; return false/>
< p：commandButton value =保存action =＃{bean.save}
update =：masteroncomplete =PF（'detail'）hide（）/> ;
< / h：form>
< / p：dialog>
这里有一个
@ViewScopedbean：私人列表<实体>实体; // + 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> 的渲染和可视属性之间的差异
- 如何仅在完成成功的表单提交时显示对话
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>
The dialog is declared as follows:
<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 /
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.
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/>.
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.
Any ideas?
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.
Here's a kickoff example:
<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>
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();
}
See also:
- Creating master-detail pages for entities, how to link them and which bean scope to choose
- Creating master-detail table and dialog, how to reuse same dialog for create and edit
- Keep p:dialog open when a validation error occurs after submit
- Difference between rendered and visible attributes of <p:dialog>
- How to display dialog only on complete of a successful form submit
这篇关于如何从p：dataTable在p：对话框中显示当前行的详细信息，并保存后更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
