如何保持primefaces行扩展打开？答案

【问题标题】：How to keep primefaces rowexpansion open?如何保持primefaces行扩展打开？
【发布时间】：2014-01-03 22:38:49
【问题描述】：

到目前为止，我有一个带有行扩展的嵌套数据表，但我想保持所有行扩展（打开）如何在 primefaces 上实现这一点？

提前致谢。

抱歉，我没有说明我使用的是什么版本的 primefaces，版本 3.5。

【问题讨论】：

仅供参考，展开=打开，折叠=关闭。

标签： jsf primefaces

【解决方案1】：

如果只更新行子而不更新所有表单或数据表，则可以保持打开的rowExpansion。

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

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

Y para hacerlo de forma dinámica podríamos hacerlo pasándole el índice del elemento padre：

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>

这个例子是我从this post的回答中得到的

【讨论】：

【解决方案2】：

如果你想让你的行在开始时折叠：

<p:headerRow>
  <p:column styleClass="my-class">
    <h:outputText value="#{bean.value}"/>
  </p:column>
</p:headerRow>

...

<script>
  $(document).ready(function () {
    $('td.my-class > .ui-rowgroup-toggler').click();
  });
</script>

【讨论】：

【解决方案3】：

根据 Primefaces 4.0 文档：

p:rowToggler 组件放置一个展开/折叠图标，单击折叠的行加载使用 ajax 扩展内容。如果您需要将行显示为默认展开，请使用 expandedRow 在渲染每一行之前评估的属性，因此支持值表达式。

要保持所有行打开，请在您的数据表中使用它，如下所示：

<p:dataTable value="#{bean.list}" expandedRow="#{true}">

要使更新前打开的行保持打开状态，您需要：

跟踪（服务器端可能最好）手动打开和关闭哪些行（通过 ajax 执行此操作）
在（重新）加载p:dataTable 时，您应该在expandedRow 属性中放置一个评估它正在处理的当前行的EL（使用var 属性或数据表上的索引或rowkey）返回true之前展开的每一行。

类似这样的东西（未完全测试）

<p:dataTable value="#{bean.list}" var="myRow" expandedRow="#{bean.isExpanded(myRow)}">

这里是 google 代码中的 the feature request，针对 3.5.12 和 4.0。

【讨论】：

我使用的是 3.5 版本，看起来他们还没有在这个版本中实现这个属性。
不，至少如果你不是 3.5.12，你需要获得精英许可证。如果没有，最好升级到 4.0 或尝试给定链接提供的 JS 代码。
好吧，我会将 primefaces 的版本更新到 4.0，这似乎是最好的方法，谢谢 Xtreme Biker。

【解决方案4】：

另一种解决方案可能是：

<p:commandButton type="button" onclick="jQuery('.ui-row-toggler').click()" value="Expand/Collapse All" />

【讨论】：