Question

我正在使用RichFaces和JSF开发一个简单的应用程序。此应用程序的一个页面包含几个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>

Answer 1

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

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

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

switchType控制从中提取内容的位置，而不是如何展开/折叠面板。

Answer 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>
...

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

2 个答案: