从外部对话框更新 rowExpansion Primefaces 内的行子数据表而不关闭它

Question

从外部对话框保存后，我试图从 rowExpansion 更新一行而不更新整个表单以不关闭。我只想更新我刚刚从 rowExpansion 的 dataTable 编辑的子行。

idCommandButtonDetailProductChild 按钮调用 idDialogDetailProduct 对话框，可以在其中编辑数据。在这个对话框中，当使用 idCommandButtonUpdate 按钮保存时，我希望 idTableDetailProductChild 的行在不关闭 rowExpansion 的情况下更新。

我的代码如下：

ProductsList.xhtml（带行扩展的数据表）

        <!-- PRODUCT LIST -->
        <p:dataTable id="idTableDetailProduct"                      
                     paginator="false" 
                     value="#{productController.productDetailDTOs}"
                     var="productDetail"
                     selection="#{productController.selectedProductDTOs}"
                     rowKey="#{productDetail.id}"
                     emptyMessage="#{diccBean.msg['product.productNotFound']]}"
                     scrollable="true"
                     scrollHeight="600">                     
                     ...
                                                                    
                <p:rowExpansion>
             
                <!-- PRODUCT LIST CHILD -->
                <p:dataTable id="idTableDetailProductChild" 
                            paginator="false" 
                            value="#{productDetail.productDTO.listProductsChild}"
                            var="productChild"
                            rowKey="#{productDetail.id}"                                     
                            emptyMessage="#{diccBean.msg['product.productChildNotFound']}"
                            scrollable="true">  
                            
                            
                            <!-- VIEW PRODUCT DETAIL  -->
                            <p:commandButton 
                                id="idCommandButtonDetailProductChild" 
                                title="#{diccBean.msg['product.detailProduct']}"
                                icon="fa fa-fw fa-search"
                                action="#{productController.initDetailProduct}"
                                oncomplete="PF('widgetVarDetailProduct').show();"
                                update="tabViewDetalle:idDialogDetailProduct">
                                <f:setPropertyActionListener value="#{productChild.productDetailDTO.id}" target="#{productController.productDetailId}"/>                                                                
                            </p:commandButton>

ProductDialog.xhtml（我从那里更新 rowExpansion 的子行）

<h:body>
        <ui:composition>    
            <p:dialog id="idDialogDetailProduct"            
                header="#{diccBean.msg['product.tittleDetailProduct']]}"
                resizable="false" 
                widgetVar="widgetVarDetailProduct" 
                modal="true"
                width="1200"            
                appendTo="@(body)"
                binding="#{productController.idDialogDetailProduct}">
                
                <h:form id="formDetailProduct">
                
                ...

                        <!-- SAVE COMPONENT BUTTON  -->
                        <p:commandButton 
                            id="idCommandButtonUpdate"                         
                            value="Componente: #{diccBean.msg['actions.save']}"
                            action="#{productController.actionUpdate}"
                            process="@form"
                            icon="fa fa-fw fa-check" 
                            update="tabViewDetalle:idTableDetailProduct" /> 


                </h:form>                           
            </p:dialog>         
        </ui:composition>
    </h:body>

Answer 1

通过将父行的索引放在更新属性中，您可以只更新 rowExpansion（子数据表）的一行而不关闭它。

例如，如果父行是第 3 项，则如下所示：

update=":tabViewDetail:idTableDetailProduct:3:idTableDetailProductChild"

要动态地做到这一点，我们可以通过将父元素的索引传递给它来做到这一点：

update=":tabViewDetail:idTableDetailProduct:#{productController.indexParent}:idTableDetailProductChild"

并且父行的索引可以通过在父数据表中添加以下属性来获取：

rowIndexVar="indexParent"

然后我们将它设置为这样的 bean：

<f:setPropertyActionListener value="#{indexParent}" target="#{productController.indexParent}" />

那么解决方案如下：

ProductsList.xhtml

            <!-- PRODUCT LIST -->
            <p:dataTable id="idTableDetailProduct"  
                         value="#{productController.productDetailDTOs}"
                         var="productDetail"            
                         ...
                         rowIndexVar="indexParent">
 
 
                <p:rowExpansion>
                 
                    <!-- PRODUCT LIST CHILD -->
                    <p:dataTable id="idTableDetailProductChild"                                 
                                value="#{productDetail.productDTO.listProductsChild}"
                                var="productChild"  
                                ...>                                
                                
                                <!-- VIEW PRODUCT DETAIL  -->
                                <p:commandButton 
                                    id="idCommandButtonDetailProductChild"
                                    ...>                                    
                                    <f:setPropertyActionListener value="#{indexParent}" target="#{productController.indexParent}" />                                                                            
                                </p:commandButton>

productController Bean (Java)

@ManagedBean(name="productController")      
        public class ProductController{
        
            int indexParent;
        
            public int getIndexParent() {
                return indexParent;
            }

            public void setIndexParent(int indexParent) {
                this.indexParent = indexParent;
            }
 
        }

ProductDialog.xhtml

<h:body>
    <ui:composition>    
        <p:dialog id="idDialogDetailProduct"            
                ...>                            

            <!-- SAVE COMPONENT BUTTON  -->
            <p:commandButton 
                id="idCommandButtonUpdate"                         
                ... 
                update=":tabViewDetail:idTableDetailProduct:#{productController.indexParent}:idTableDetailProductChild" />  
                                
        </p:dialog>         
    </ui:composition>
</h:body>

从外部对话框更新 rowExpansion Primefaces 内的行子数据表而不关闭它

Update from an external dialog a row child dataTable inside a rowExpansion Primefaces without closing it

java

jsf

primefaces