关闭lightbox后更新datatable

Question

我正在使用Primefaces，我想在调用lightbox并关闭它之后刷新数据表？

<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上下文= RequestContext.getCurrentInstance（）;

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

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

Answer 1

您需要连接到onHide客户端回调，即属性为<p:lightBox>标记，以在灯箱关闭时捕获事件。从JS函数你可以打电话，例如<p:remoteCommand>来更新你想要的。

基本例如延长：

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

基本上就是在这里发生的是以下内容：（一）关闭灯箱，（B）remote() JS调用函数和（c）与ID datatable更新元素通过AJAX。