如何在 primefaces 的多个数据表中呈现相同的列表

Question

我正在使用 primefaces，我想用相同的列表填充两个数据表。

当我 select 任何一本书时，都会显示两个面板。第一个显示书籍和作者的详细信息。第一个面板中显示的作者是一个可编辑的数据表。我还想在第二个面板中显示相同的数据表。但如您所见，它显示 "No records found"。如何实现？

我的jsf页面如下：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://xmlns.jcp.org/jsf/html"
            xmlns:f="http://xmlns.jcp.org/jsf/core"
            xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            template="/WEB-INF/templates/Layout.xhtml">

<ui:define name="content">
    <f:view>
        <h:form id="form">
            <p:growl id="msgs" showDetail="true"/>
            <p:dataTable value="#{webBooks.entries}" var="book" id="bookList"
                         styleClass="order-table"
                         rows="3" paginator="true" editMode="true" editable="true">
                <div>
                    <f:facet name="header">
                        <p:outputLabel value="Books List"/>
                    </f:facet>
                </div>
                <p:columnGroup type="header">
                    <p:row>
                        <p:column style="width:10px"/>
                        <p:column headerText="Id" style="width:30px"/>
                        <p:column headerText="Book Title" style="width:200px"/>
                        <p:column headerText="Price" style="width:30px"/>
                    </p:row>
                </p:columnGroup>
                <p:column>
                    <p:commandButton update=":form:bookDetail" 
                                     onclick="PF('bookDialog').show(), PF('authorDialog').show()" 
                                     title="View Book Detail"
                                     icon="fa fa-info-circle">
                        <f:setPropertyActionListener value="#{book}" target="#{webBooks.selectedBook}"/>

                    </p:commandButton>
                </p:column>
                <p:column>
                    <p:outputLabel value="#{book.id}"/>
                </p:column>
                <p:column>
                    <p:outputLabel value="#{book.title}"/>
                </p:column>
                <p:column>
                    <p:outputLabel value="#{book.price}"/>
                </p:column>
            </p:dataTable>
            <p:panelGrid columns="2">
                <p:panel id="bookDetail" 
                     header="Book Info" 
                     closable="true" 
                     toggleable="true" 
                     widgetVar="bookDialog" visible="false" style="width:420px;height:250px;">


                <p:panelGrid columns="2"
                             rendered="#{not empty webBooks.selectedBook}">
                    <h:outputLabel value="Id" />
                    <p:outputLabel value="#{webBooks.selectedBook.id}" 
                                   rendered="#{webBooks.selectedBook.editable}"/>

                    <p:outputLabel value="#{webBooks.selectedBook.id}" 
                                   rendered="#{not webBooks.selectedBook.editable}"/>

                    <p:outputLabel value="Title"/>
                    <p:inputText value="#{webBooks.selectedBook.title}" 
                                 rendered="#{webBooks.selectedBook.editable}"/>

                    <p:outputLabel value="#{webBooks.selectedBook.title}" 
                                   rendered="#{not webBooks.selectedBook.editable}"/>

                    <p:outputLabel value="Price"/>
                    <p:inputText value="#{webBooks.selectedBook.price}" 
                                 rendered="#{webBooks.selectedBook.editable}"/>

                    <p:outputLabel value="#{webBooks.selectedBook.price}" 
                                   rendered="#{not webBooks.selectedBook.editable}"/>
                    <p:outputLabel value="Author(s)" />
                    <p:dataTable value="#{webBooks.selectedBook.authoredBy}" 
                                 var="authoredBy" 
                                 id="authorList" 
                                 scrollable="true" 
                                 scrollHeight="70" 
                                 scrollWidth="300"
                                 editable="true">
                        <p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
                        <p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
                        <p:columnGroup type="header">
                            <p:row>
                                <p:column style="width:30px" headerText="Id"/>
                                <p:column style="width:100px" headerText="Author Name"/>
                            </p:row>
                        </p:columnGroup>
                        <p:column>
                            <p:outputLabel value="#{authoredBy.id}"/>
                        </p:column>
                        <p:column>
                            <p:cellEditor>
                                <f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
                                <f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:32px">
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                </p:panelGrid>

                <p:commandButton value="Edit" 
                                 action="#{webBooks.edit(webBooks.selectedBook)}" 
                                 rendered="#{not webBooks.selectedBook.editable}" 
                                 update=":form:bookDetail"/>
                <p:commandButton value="Save" 
                                 actionListener="#{webBooks.save(webBooks.selectedBook)}" 
                                 rendered="#{webBooks.selectedBook.editable}" 
                                 update="bookList" 
                                 process="@form" 
                                 id="save" 
                                 oncomplete="PF('bookDialog').close()"/>
                <p:commandButton value="Cancel" 
                                 actionListener="#{webBooks.cancel(webBooks.selectedBook)}" 
                                 rendered="#{webBooks.selectedBook.editable}" 
                                 update=":form:bookDetail"/>
                <p:commandButton value="Delete" 
                                 actionListener="#{webBooks.remove(webBooks.selectedBook)}" 
                                 onclick="return confirm('Are you sure?')" 
                                 id="remove" 
                                 update="bookList" 
                                 process="@form" 
                                 oncomplete="PF('bookDialog').close()"/>
            </p:panel>
                <p:panel header="Author Info" 
                     widgetVar="authorDialog" 
                     closable="true" 
                     toggleable="true" 
                     visible="false" style="width:420px;height:250px;">
                <p:panelGrid columns="2">
                    <p:dataTable value="#{webBooks.selectedBook.authoredBy}" 
                                 var="authoredBy" 
                                 id="authorsList" 
                                 scrollable="true" 
                                 scrollHeight="150" 
                                 scrollWidth="300"
                                 editable="true">
                        <p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
                        <p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
                        <p:columnGroup type="header">
                            <p:row>
                                <p:column style="width:30px" headerText="Id"/>
                                <p:column style="width:100px" headerText="Author Name"/>
                            </p:row>
                        </p:columnGroup>
                        <p:column>
                            <p:outputLabel value="#{authoredBy.id}"/>
                        </p:column>
                        <p:column>
                            <p:cellEditor>
                                <f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
                                <f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:32px">
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                </p:panelGrid>
            </p:panel>
            </p:panelGrid>


        </h:form>
    </f:view>
</ui:define>

Answer 1

您只是在 "View Book Detail" 按钮中更新 update=":form:bookDetail"。向面板添加一个 ID "Author Info" 并更新它：

<p:commandButton update=":form:bookDetail :form:authorDetail" 
                 ...>
  ...
</p:commandButton>

...

<p:panel id="authorDetail"
         header="Author Info" 
         ...>
  ...
</p:panel>

另请参阅：

Can 'update' attribute update two components simultanously?

如何在 primefaces 的多个数据表中呈现相同的列表

How to render same list in multiple datatables in primefaces

jsf

primefaces

datatable

jsf-2.2