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

【问题标题】：Update from an external dialog a row child dataTable inside a rowExpansion Primefaces without closing it从外部对话框更新 rowExpansion Primefaces 内的行子数据表而不关闭它
【发布时间】：2021-07-06 11:04:02
【问题描述】：

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

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

我的代码如下：

ProductsList.xhtml（带有rowExpansion的数据表）

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

【问题讨论】：

标签： java jsf primefaces

【解决方案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>

【讨论】：