如何在 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 的属性，其中 Student 实例对应于传递的 id)但是它永远不会被击中.

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是在

中用作var的名称:datatable/> 显示所有学生，因此 student 在 <p:dialog/> 中无效，它在 之外<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屋！