如何折叠或展开页面上的所有 RichFaces collapsiblePanel 元素？答案

【问题标题】：How to collapse or expand all RichFaces collapsiblePanel elements on the page?如何折叠或展开页面上的所有 RichFaces collapsiblePanel 元素？
【发布时间】：2013-05-30 12:48:51
【问题描述】：

我正在使用带有 JSF 的 RichFaces 来开发一个简单的应用程序。此应用程序的一页包含多个 collapsiblePanel 元素。一些 collapsiblePanel 元素是嵌套的，但不会超过第二层。

我想在页面上提供链接或按钮来展开和折叠页面上的所有 collapsiblePanel 元素。我该怎么做？

元素当前使用switchType="client" 属性让客户端处理展开和折叠。我怀疑使用 ajax 类型可能会有所帮助，但我不确定也不知道如何利用它。

更新：如果我包含一个我正在尝试做的示例，我的问题可能更容易理解：

<h:form>
  <a4j:commandButton actionListener="#{bean.setDefaultExpanded(true)}"
                render="reportPanel" value="Expand all" />
  <a4j:commandButton actionListener="#{bean.setDefaultExpanded(false)}"
                render="reportPanel" value="Collapse all" />

  <h:panelGrid id="reportPanel">
    <ui:repeat var="account" value="#{bean.results.entrySet().toArray()}">
      <rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
        <ui:repeat var="chargeGroup" value="#{account.value.entrySet().toArray()}">
          <rich:collapsiblePanel expanded="#{bean.defaultExpanded}">
            <h:outputText value="content: #{chargeGroup.value}" />
          </rich:collapsiblePanel>
        </ui:repeat>
      </rich:collapsiblePanel>
    </ui:repeat>
  </h:panelGrid>
</h:form>

【问题讨论】：

标签： jsf richfaces

【解决方案1】：

<rich:collapsiblePanel> 具有expanded 属性，您可以将其绑定到 bean 属性并从那里控制扩展。像这样的

<rich:collapsiblePanel id="panel1" expanded="#{bean.expanded}" …>

<a4j:commandButton actionListener="#{bean.togglePanels()}" 
    … render="panel1, panel2, …"/>

switchType 控制从何处提取内容，而不是控制面板的展开/折叠方式。

【讨论】：

谢谢，这给了我一个开始的地方。我没有列出所有 ID，而是将所有 rich:collapsiblePanel 元素包装在单个 h:panelGrid 中并使用它的 ID。我还删除了 switchType 属性，因此面板将默认为 ajax 类型。它似乎运作良好，直到我意识到现在所有面板必须具有相同的展开状态。我想我没有很好地解释这个问题。我的意思是让用户能够展开/折叠任何面板，使用这些按钮来展开/折叠所有面板。这是否意味着我需要保留每个面板的状态？
我想我不明白。您有几个面板 - 一些展开，一些折叠 - 您单击按钮。你想发生什么？
如果我们想看到所有 collapsiblePanel 打开或关闭，您提供的解决方案效果很好。但是，我发现当我单击打开的几个单独的面板，然后单击命令按钮将它们全部打开，然后尝试单击关闭的几个面板时，bean 中的面板状态开始与它们的视觉状态不同步用户界面。发生这种情况时，有时单击按钮以展开它们都没有任何作用。我希望按钮可以将它们全部打开，但它没有发生。那时，如果我关闭了一些打开的面板并然后单击了按钮，那么它可能会起作用。

【解决方案2】：

单击单个面板然后展开/折叠全部时，我遇到了同样的问题。这对我有用（richfaces 4.2.3）：

<h:commandButton  immediate="true" action="#{controllerBean.toggleMin}"  value="collapse all" >
    <a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
<h:commandButton immediate="true" action="#{controllerBean.toggleMax}" value="expand all">
    <a4j:ajax render="panel1 panel2"></a4j:ajax>
</h:commandButton>
...
<rich:collapsiblePanel id="panel1" immediate="true" expanded="#{modelBean.expanded}" header="Title text" switchType="client">
    ...
</rich:collapsiblePanel>
...

【讨论】：