在嵌套控件中更新 PrimeFaces 数据表？

Question

我对 JSF 和 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");

}

在这一点上的任何帮助将不胜感激。

Answer 1

而不是更新整个p:layoutUnit。您可以更新数据表，也可以在其周围放置 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");

请注意，在使用 RequestContext 从 ManagedBean 更新组件时，您无需在组件 ID 的开头提供 :。