2017-03-16 48 views
0

我是JSF和PrimeFaces的新手。我正在嘗試更新嵌套元素中的數據表。我已經嘗試過的所有事情都已經破壞了網頁或者不成功。這是標記:更新嵌套控件內PrimeFaces數據表?

<h:form id="form2"> 
     <p:growl id="msgs" sticky="true" showDetail="true" autoUpdate="true" /> 
     <ui:insert name="content"> 
       <ezcomp:header /> 
       <p:layout> 
        <p:layoutUnit position="west" > 
         <ezcomp:navigation /> 
        </p:layoutUnit> 
        <p:layoutUnit position="center" > 
         <p:wizard widgetVar="wiz"> 
          <p:tab id="flightInformation" title="General"> 
           <p:panel header="Flight Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 

             <p:outputLabel>Aircraft Name: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.aircraftName}" required="true" label="Aircraft Name"></p:inputText> 
             <p:outputLabel>Airline Name: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.airlineName}" required="true" label="Airline Name"></p:inputText> 
             <p:outputLabel>Flight Number: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.flightNumber}" required="true" label="Flight Number"></p:inputText> 
             <p:outputLabel>Duration: </p:outputLabel> 
             <p:inputMask value="#{flightWizard.flightMB.flight.flightTime}" mask="99:99" placeholder="HH:MM" required="true" label="Flight Duration"></p:inputMask> 
             <p:outputLabel>Base Price: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.basePrice}" required="true" label="Base Price"></p:inputText> 
            </h:panelGrid> 
           </p:panel> 

          </p:tab> 
          <p:tab id="arrivalInfo" title="Departure And Arrival"> 
           <p:panel header="Departure And Arrival Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 
             <p:outputLabel>Departure Airport: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.departureAirport}" required="true" label="Departure Airport"></p:inputText> 
             <p:outputLabel>Departure Airport Code: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.departureAirportCode}" required="true" maxlength="3" label="Departure Airport Code"></p:inputText> 
             <p:outputLabel>Departure Date and Time: </p:outputLabel> 
             <p:calendar value="#{flightWizard.flightMB.flight.departure}" pattern="dd.MM.yyyy HH:mm" required="true" label="Departure Date and Time" /> 
             <p:outputLabel>Arrival Airport: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.arrivalAirport}" required="true" label="Arrival Airport"></p:inputText> 
             <p:outputLabel>Arrival Airport Code: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.arrivalAirportCode}" required="true" maxlength="3" label="Arrival Airport Code"></p:inputText> 
             <p:outputLabel>Arrival Date and Time: </p:outputLabel> 
             <p:calendar value="#{flightWizard.flightMB.flight.arrival}" pattern="dd.MM.yyyy HH:mm" required="true" label="Arrival Date and Time"/> 


            </h:panelGrid> 
           </p:panel> 
          </p:tab> 
          <p:tab id="seatingInfo" title="Seating"> 
           <p:panel header="Seating Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 
             <p:outputLabel>Economy</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.economyClassSeats}" required="true" label="Total Economy Seats" /> 
             <p:outputLabel>Business</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.businessClassSeats}" required="true" label="Total Business Seats" /> 
             <p:outputLabel>First Class</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.firstClassSeats}" required="true" label="Total First Class Seats" /> 
            </h:panelGrid> 
           </p:panel>     
          </p:tab> 
          <p:tab id="confirmation" title="Confirmation"> 
           <p:panel header="Confirm Flight"> 
            <p:messages /> 

            <p:dataGrid value="#{flightWizard.flightMB.flight}" var="f" columns="2"> 
             <div style="width:50%;"> 
              <h:panelGrid columns="2" > 
               <p:outputLabel>Aircraft Name: </p:outputLabel> 
               <h:outputText value="#{f.aircraftName}"></h:outputText> 
               <p:outputLabel>Airline Name: </p:outputLabel> 
               <h:outputText value="#{f.airlineName}" ></h:outputText> 
               <p:outputLabel>Flight Number: </p:outputLabel> 
               <h:outputText value="#{f.flightNumber}" ></h:outputText> 
               <p:outputLabel>Duration: </p:outputLabel> 
               <h:outputText value="#{f.flightTime}"></h:outputText> 
               <p:outputLabel>Base Price: </p:outputLabel> 
               <h:outputText value="#{f.basePrice}"></h:outputText> 

               <p:outputLabel>Arrival Airport: </p:outputLabel> 
               <h:outputText value="#{f.arrivalAirport}" ></h:outputText> 
               <p:outputLabel>Arrival Airport Code: </p:outputLabel> 
               <h:outputText value="#{f.arrivalAirportCode}" ></h:outputText> 
               <p:outputLabel>Arrival Date and Time: </p:outputLabel> 
               <h:outputText value="#{f.arrival}" /> 

               <p:outputLabel>Departure Airport: </p:outputLabel> 
               <h:outputText value="#{f.departureAirport}" ></h:outputText> 
               <p:outputLabel>Departure Airport Code: </p:outputLabel> 
               <h:outputText value="#{f.departureAirportCode}" ></h:outputText> 
               <p:outputLabel>Departure Date and Time: </p:outputLabel> 
               <h:outputText value="#{f.departure}" /> 

               <p:outputLabel>Economy: </p:outputLabel> 
               <h:outputText value="#{f.economyClassSeats}" ></h:outputText> 
               <p:outputLabel>Business: </p:outputLabel> 
               <h:outputText value="#{f.businessClassSeats}" ></h:outputText> 
               <p:outputLabel>First Class: </p:outputLabel> 
               <h:outputText value="#{f.firstClassSeats}" ></h:outputText> 
              </h:panelGrid> 
             </div> 

             <p:commandButton value="Add To Submission" ajax="true" action="#{flightWizard.addAnother(f)}" oncomplete="PF('wiz').loadStep('flightInformation',false)" /> 
            </p:dataGrid> 
           </p:panel>   

          </p:tab> 
         </p:wizard> 
        </p:layoutUnit> 
        <p:layoutUnit id='submissionUnit' position="east" size='40%' > 
         <p:dataTable id='submissionTable' var="x" value="#{flightWizard.flightMB.flights}" rowIndexVar="rowIndex"> 
          <p:column style="font-size:0.8em;" headerText="Flight Number"> 
           <h:outputText value="#{x.flightNumber}" /> 
          </p:column> 
          <p:column style="font-size:0.8em;" headerText="Arrival Code"> 
           <h:outputText value="#{x.arrivalAirportCode}" /> 
          </p:column> 
          <p:column style="font-size:0.8em;" headerText="Arrival"> 
           <h:outputText value="#{x.arrival}" /> 
          </p:column>          
          <p:column style="font-size:0.8em;" headerText="Departure Code"> 
           <h:outputText value="#{x.departureAirportCode}" /> 
          </p:column> 

          <p:column style="font-size:0.8em;" headerText="Departure"> 
           <h:outputText value="#{x.departure}" /> 
          </p:column>          
          <p:column style="font-size:0.8em;" headerText="Edit"> 
           <p:commandButton value="Edit" action="#{flightWizard.flightMB.changeFlightByIndex(rowIndex)}" oncomplete="PF('wiz').loadStep('flightInformation',false)"/> 
          </p:column> 
         </p:dataTable>  
         <br/> 
         <p:commandButton value="Submit" immediate="true" disabled="#{flightWizard.flightMB.flights.size()==0?true:false}" action="#{flightBean.insertFlight(flightWizard.flightMB.flights)}"/> 
        </p:layoutUnit> 
       </p:layout>     
     </ui:insert> 

我想通過命令按鈕從第二個佈局單元更新第三個佈局單元中的數據表。

我試過使用命令按鈕的更新屬性,但它似乎只是打破了嚮導,並且不允許我輸入它所在的選項卡。

我也試着從bean更新它,像這樣:

public void addAnother(Flight f){ 
    flightMB.addFlightToCreate(f); 
    flightMB.setFlight(new Flight()); 
    RequestContext reqCtx = RequestContext.getCurrentInstance(); 
    // reqCtx.update("form2:submissionUnit"); 
    reqCtx.update("form2:layoutUnit"); 

} 

在這一點任何幫助,將不勝感激。

+0

不要嘗試更新佈局使用更新':form2:submissionTable' –

回答

1

而不是更新整個p:layoutUnit。您可以更新Datatable,或者您可以在其周圍放置一個h:panelGroup並更新它。

@XHTML:

<h:form id="form1"> 
<p:layoutUnit id='submissionUnit'> 
<h:panelGroup id="tablePG"> 
<p:dataTable id='submissionTable'> 
... 
</p:dataTable> 
</h:panelGroup> 
</p:layoutUnit> 
</h:form> 

@ManagedBean:

RequestContext.getCurrentInstance().update("form1:tablePG"); 

並請注意,在使用RequestContextManagedBean更新組件,那麼你並不需要在你的組件ID的開始提供:

+0

感謝您的答案。正是我在找的東西。 –