在 JSF 的对话框中显示数据表中的行数据

Question

我有一个用 JSF 2.2 和 PrimeFaces 3.5 编写的简单 CRUD 应用程序。该数据库由两个表组成 - 客户和订单。我有一个数据表视图，其中列出了所有客户，最后一列是三个按钮 - 用于 eidt、删除和显示每个客户的订单。单击编辑按钮时，应在模式对话框表单中加载所选客户端的数据，但无论在对话框中按下哪个按钮，始终为第一行中的客户端加载数据。删除按钮也是如此。

这是视图的代码：

<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:commandButton id="addNewClientButton" type="button"
        onclick="add.show();" value="Add new client"
        action="clientBeans.newClient" />
    <br />

    <p:dataTable var="client" value="#{clientBeans.getAllClients()}"
        border="true">
        <p:column headerText="Client Id">
            <h:outputText value="#{client.clientId}" />
        </p:column>
        <p:column headerText="Name">
            <h:outputText value="#{client.name}" />
        </p:column>
        <p:column headerText="Address">
            <h:outputText value="#{client.address}" />
        </p:column>
        <p:column headerText="Email">
            <h:outputText value="#{client.email}" />
        </p:column>
        <p:column headerText="Options">
            <p:commandButton value="Edit" id="editClientButton"
                action="#{clientBeans.editClient}" type="button"
                update=":form:editClient" onclick="edit.show();">
                <f:setPropertyActionListener 
                                      target="#{clientBeans.client}"
                    value="#{client}" />
            </p:commandButton>
            <p:commandButton action="#{clientBeans.deleteClient}"                              
                                   value="Delete"
                id="deleteClientButton" type="button"             
                                    onclick="remove.show();"
                icon="ui-icon-circle-close">
                <f:setPropertyActionListener
                    target="#{clientBeans.client.clientId}" 
                            value="#{client}" />
            </p:commandButton>
            <p:commandButton
               action="#orderBeans.getSpecificOrders(client.clientId)}"
                value="Orders">
                <f:setPropertyActionListener
                    target="#{clientBeans.client.clientId}" 
                 value="#{client.clientId}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
</h:form>

<h:form>
    <p:dialog id="addNewClient" header="Add new client" widgetVar="add"
        modal="true" resizable="false">
        <p:panelGrid columns="2" border="false">
            <h:outputLabel for="name" value="Name: " />
            <p:inputText id="name" value="#{clientBeans.client.name}"
                label="name" required="true" />

            <h:outputLabel for="address" value="Address: " />
            <p:inputText id="address" 
                        value="#{clientBeans.client.address}"
                label="address" required="true" />

            <h:outputLabel for="email" value="Email: " />
            <p:inputText id="email" value="#{clientBeans.client.email}"
                label="email" required="true" />

            <f:facet name="footer">
                <p:commandButton 
                        action="#{clientBeans.createClient}" value="Save"
                    icon="ui-icon-check" style="margin:0">  
                             </p:commandButton>
            </f:facet>
        </p:panelGrid>
    </p:dialog>
</h:form>

<h:form>
    <p:dialog id="editClient" header="Edit client" widgetVar="edit"
        modal="true" resizable="false">
        <h:panelGrid columns="2" id="displayClient">
            <h:outputLabel for="id" value="Id: " />
        <h:outputText id="id" value="#{client.clientId}" label="id" />

            <h:outputLabel for="name" value="Name: " />
            <p:inputText id="name" value="#{client.name}" label="name"
                required="true" />

            <h:outputLabel for="address" value="Address: " />
        <p:inputText id="address" value="#{client.address}" label="address"
                required="true" />

            <h:outputLabel for="email" value="Email: " />
        <p:inputText id="email" value="#{client.email}" label="email"
                required="true" />

            <f:facet name="footer">
                <p:commandButton 
                        action="#{clientBeans.updateClient}" value="Save"
                    icon="ui-icon-check" style="margin:0"> 
                           </p:commandButton>
            </f:facet>
        </h:panelGrid>
    </p:dialog>
</h:form>

<h:form>
    <p:dialog id="deleteClient"
        header="Are you sure you want to delete this client?"
        widgetVar="remove" modal="true" resizable="false">
        <p:panelGrid columns="2">
            <h:outputLabel for="id" value="Id: " />
        <h:outputText id="id" value="#{client.clientId}" label="id" />

            <h:outputLabel for="name" value="Name: " />
        <h:outputText id="name" value="#{client.name}" label="name" />

            <h:outputLabel for="address" value="Address: " />
    <h:outputText id="address" value="#{client.address}" label="address" />

            <h:outputLabel for="email" value="Email: " />
    <h:outputText id="email" value="#{client.email}" label="email" />

            <f:facet name="footer">
        <p:commandButton action="#{clientBeans.confirmDeleteClient}"
                value="Delete" icon="ui-icon-circle-close" />
            </f:facet>
        </p:panelGrid>
    </p:dialog>
</h:form>

Answer 1

我没有浏览所有代码，但我可以很快发现您误用了<p:commandButton>：属性type="button" 应该只用于调用自定义JavaScript（客户端）代码，因此它与action 和 actionListener，适用于调用服务器操作。移除此属性并确保调用托管 bean 的方法 #{clientBeans.editClient}。

查看 PrimeFaces 文档，type="button" 的 commandButtons 称为“Push Buttons”。

其次，使用oncomplete 而不是onclick，以便在ajax 方法完成其工作后显示对话框。