如何在primefaces中呈現多個數據表中的相同列表

Question

我正在使用primefaces，並且想用相同列表填充兩個數據表。

當我選擇的書籍的任何一個，兩個面板中顯示。第一個顯示本書和作者的細節。在第一個面板中顯示的作者是一個可編輯的數據表。我也想在第二個面板中顯示相同的數據表。但正如你可以看到它說「沒有找到記錄」。我如何實現它？

我的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

你只更新您的 「書的具體情況」 按鈕update=":form:bookDetail"。一個ID添加到面板「作者信息」和更新，以及：

<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?