在嵌套控件中更新PrimeFaces数据表？(Updating PrimeFaces datatable inside nested controls?)

在嵌套控件中更新PrimeFaces数据表？(Updating PrimeFaces datatable inside nested controls?)

我是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"); }

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

I'm pretty new to JSF and PrimeFaces. I am trying to update my datatable within a nested element. Everything I've tried to this point has either broken the page or been unsuccessful. Here is the markup:

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

I am trying to update the datatable in the third layout unit from the second layout unit via the command button.

I've tried using the update property of the command button, but all it seems to do is break the wizard and doesn't allow me to enter the tab it is on.

I've also tried updating it from the bean like so:

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

Any help at this point would be appreciated.

最满意答案

而不是更新整个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");

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

Instead of updating the entire p:layoutUnit. You can update the Datatable or you can put a h:panelGroup around it and update that.

@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");

And please note that while updating component from ManagedBean using RequestContext then you don't need to provide : at beginning of your component Id.