关闭灯箱后更新数据表

时间:2013-04-29 11:36:20

标签: jsf jsf-2 primefaces

我正在使用Primefaces,我想在调用灯箱并关闭它后刷新数据表?

<h:form id="form">

                        <p:growl id="msgs" />

                        <fieldset>
                            <legend>La liste du Materiel </legend>

                        <p:outputPanel id="Materiels">
                            <p:dataTable id="datatablemat"  
                                value="#{materielBean2.materiellist}" 
                                var="materielu"
                                rowKey="#{materielu.filtrageDate}"
                                widgetVar="polesTable"
                                emptyMessage="pas de materiel pour cette salle"
                                 autoUpdate="true"
                                filteredValue="#{materielBean.filteredmateriel}"
                                paginator="true" rows="5"
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                rowsPerPageTemplate="5,10,15" paginatorPosition="bottom"
                                style="width:100%;height:300px">

                                <!--  Partie de la recherche -->
                                <f:facet name="header">
                                    <p:outputPanel>
                                        <h:outputText value="Search all fields:" />
                                        <p:inputText id="globalFilter" onkeyup="polesTable.filter()"
                                            style="width:150px" />
                                    </p:outputPanel>
                                </f:facet>

                                <p:column sortBy="#{materielu.materiel.matCode}"
                                filterBy="#{materielu.materiel.matCode}" filterStyle="display:none"
                                    headerText="Code Materiel">

                                            <h:outputText value="#{materielu.materiel.matCode}" />


                                </p:column>

                                <p:column sortBy="#{materielu.materiel.matDesignation}"
                                filterBy="#{materielu.materiel.matDesignation}" filterStyle="display:none"
                                    headerText="Désignation Materiel">

                                            <h:outputText value="#{materielu.materiel.matDesignation}" />


                                </p:column>

                                <p:column sortBy="#{materielu.materiel.matPrix}"
                                filterBy="#{materielu.materiel.matPrix}" filterStyle="display:none"
                                    headerText="Prix Materiel">

                                            <h:outputText value="#{materielu.materiel.matPrix}" />

                                </p:column>

                                <p:column sortBy="#{materielu.filtrageDate}"
                                filterBy="#{materielu.filtrageDate}" filterStyle="display:none"
                                    headerText="Date de mise en oeuvre Materiel">

                                            <h:outputText value="#{materielu.filtrageDate}" />



                                </p:column>


                                <p:column sortBy="#{materielu.materiel.categorie.catDesignation}"
                                filterBy="#{materielu.materiel.categorie.catDesignation}" filterStyle="display:none"
                                    headerText="Catégorie Materiel">

                                            <h:outputText value="#{materielu.materiel.categorie.catDesignation}" />


                                </p:column>
                                <p:column>



                                    <span>
                                    <p:commandButton icon="ui-icon-folder-collapsed"  
                                    action="#{materielBean2.setSelectedMaterielView(materielu.materiel)}"
                                    process="@this"
                                    update=":form:view"      
                                    oncomplete="materielDialogview.show()"

                                           >
                                    </p:commandButton>



                                </span>
                                    </p:column>
                                    <p:column>
                                    <p:lightBox iframe="true" width="700px" height="500px" widgetVar="gdl#{materielu.materiel.materielId}"  id="ss#{materielu.materiel.materielId}">
                            <h:outputLink value="add.xhtml" title="gdl#{materielu.materiel.materielId}">
                                <p:commandButton icon="ui-icon-pencil" id="bt#{materielu.materiel.materielId}"
                                 action="#{materielBean2.setSelectedMateriel(materielu.materiel)}"
                                 process="@this"      
                                 >
                                    </p:commandButton>
                            </h:outputLink>
                                </p:lightBox>
                                    </p:column>


                                    <p:column>
                                     <p:commandButton icon="ui-icon-trash" title="Supprimer"  oncomplete=""  process="">
                                    </p:commandButton>
                                        </p:column>




                                <f:facet name="footer">              
        Total #{fn:length(materielBean2.materiellist)} enregistrements.
    </f:facet>

                            </p:dataTable>

这是:add.xhtml:

<h:form id="formm" >
                    <p:panel id="panel" header="edit :" style="margin-bottom:10px;width :600px">


                            <h:panelGrid id="edit" columns="2" cellpadding="4"
                                style="margin:0 auto;">

                                <f:facet name="header">
                                    <p:messages id = "message"></p:messages>
                                </f:facet>


                                <h:outputText value="Designation materiel :" />
                               <p:inputText id="designation" required="true" value="#{materielBean2.selectedMateriel.matDesignation}" /> 

                                <h:outputText value="Prix materiel :" />
                                <pe:inputNumber id="Input1" required="true" value="#{materielBean2.prixmat}">  

                                </pe:inputNumber>  

                                    <h:outputText value="Date d'aquisition du  materiel :" />

                                   <p:calendar pattern="dd-MM-yyyy" required="true" timeZone="UTC" value="#{materielBean2.dateAquis}"  showButtonPanel="true" navigator="true" locale="pt" id="Date_aquiss" >

                                   </p:calendar> 
                                    <h:outputText value="Date de mise en service du  materiel :" />

                                     <p:calendar pattern="dd-MM-yyyy" required="true" timeZone="UTC" value="#{materielBean2.dateMise}"  showButtonPanel="true" navigator="true" locale="pt" id="Date_mise_en_servicee" >

                                   </p:calendar> 


                                    <h:outputText value="Date d'entree à l'invetaire :" />


                                     <p:calendar pattern="dd-MM-yyyy" required="true" timeZone="UTC" value="#{materielBean2.dateInventaire}"  showButtonPanel="true" navigator="true" locale="pt" id="Date_inventaire" >

                                   </p:calendar> 

                                <h:outputLabel value="Famille materiel : *" for="famillee" style="font-weight:bold;margin-right:14px;"></h:outputLabel>
                                <p:selectOneMenu id="famillee" value="#{materielBean2.famille}"  required="true" >
                                    <f:selectItem itemLabel="Select famille" itemValue="" />
                                    <f:selectItems value="#{materielBean2.familles}" />
                                    <p:ajax event="change" update="categori" 
                                        listener="#{materielBean2.categorieChange}"  />
                                </p:selectOneMenu>


                                    <h:outputText value="Catégorie materiel :" />

                                <p:selectOneMenu id="categori" value="#{materielBean2.categorie}" required="true">
                                    <f:selectItem itemLabel="Select categories" itemValue="" />
                                       <c:forEach items="#{materielBean2.categories}" var="c">

                                    <!--  >c:if test="#{materielBean2.famille == c.famille.famId}"-->
                                     <f:selectItem itemValue="#{c.catId}" itemLabel="#{c.catDesignation}" />
                                     <!--  ->/c:if-->
                                     </c:forEach>
                                     <p:ajax event="change" update="categori" 
                                        listener="#{materielBean2.categorieChange}" />
                                     </p:selectOneMenu>

                                    <h:outputText value="Marque materiel :" />
                                    <p:selectOneMenu id="marque" value="#{materielBean2.marque}" required="true">
                                    <f:selectItem itemLabel="Select Marque" itemValue="" />
                                    <f:selectItems value="#{materielBean2.marques}" />
                                </p:selectOneMenu> 

                                    <h:outputText value="Pole materiel :" />
                                <p:selectOneMenu id="p#{i}" value="#{materielBean2.pole}" required="true"  >
                                    <f:selectItem itemLabel="Select Pole" itemValue="" />
                                    <f:selectItems value="#{materielBean2.poles}" />
                                    <p:ajax event="change" update="salless" 
                                        listener="#{materielBean2.salleChange}" >

                                     </p:ajax>

                                </p:selectOneMenu>

                                    <h:outputText value="Salle materiel :" />

                                    <p:selectOneMenu id="salless" value="#{materielBean2.salle}" required="true"  >

                                    <f:selectItem itemLabel="Select Salle" itemValue="" />
                                    <f:selectItems value="#{materielBean2.salles2}" />

                                </p:selectOneMenu>







                            </h:panelGrid>




                            <div class="clearboth"></div>




                        </p:panel>
                        <p>
                            <p:commandButton id="btn_add" value="Valider"    
                                     action="#{materielBean2.addMateriel}" update="@form" style="margin-top:30px;margin-left:2px;"

                                     >
                                </p:commandButton>

                            </p>

                    </h:form>

数据表在我使用时更新:

`RequestContext context = RequestContext.getCurrentInstance();

context.execute("parent.location.reload(true)");`

但它重新加载了所有页面,我想重新加载数据表。

1 个答案:

答案 0 :(得分:2)

您需要连接到onHide客户端回调,这是<p:lightBox>标记的属性,以便在灯箱关闭时捕获事件。从JS函数中,您可以调用,例如<p:remoteCommand>来更新您想要的内容。

扩展的基本示例:

<p:lightBox onHide="remote()"...>
    ....
</p:lightBox>
<p:dataTable id="datatable" ...>
<p:remoteCommand name="remote" update="datatable"/>  

基本上这里发生的事情如下:(a)关闭灯箱,(b)remote()调用JS函数,(c)通过AJAX更新标识为datatable的元素。