渲染 <p:panel> 通过单击展开内容

Question

当前，我使用JSF开发了一个前端，该前端加载了太多数据，并且并非在所有情况下用户都需要，该数据被标签分割，我需要通过单击扩展面板来动态呈现信息：

        <p:panel header="#{myBean.someStringTittle}"
            id="information1" toggleable="true" rendered="true" collapsed="true">

                    <h:panelGrid>
                        <h:outputText
                            value="#{mybean.someVale]}" />
                        <p:inputText readonly="true">
                                ......
                                ......
        <p:panel>

在许多情况下，用户不需要查看该面板内的信息，属性collapsed =“ true”会将面板关闭，但是面板内的信息已呈现，只有在用户展开面板。

我该怎么办？

Answer 1

您可能想尝试为'tabChange'和/或'tabClos​​e'事件编写事件处理程序。 根据激活的选项卡，将内容动态加载到支持Bean中。 然后，当网页刷新时，它将显示内容。

这是手风琴面板的Primefaces展示柜的“更改事件”示例。

http://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml

Answer 2

我认为您可以使用仅带有一个选项卡的p：accordionPanel来做到这一点：

<p:accordionPanel dynamic="true" cache="true">
    <p:tab title="Godfather Part I">
        <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage name="demo/images/godfather/godfather1.jpg" />
            <h:outputText
                value="The story begins as Don Vito Corleone..." />
        </h:panelGrid>
    </p:tab>
</p:accordionPanel>

或在现有面板上放置p:ajax

<p:ajax event="toggle" listener="#{myBean.onToggle}" update="information1" />

同

<h:panelGrid rendered="#{myBean.boole}">

并在onToggle（）中将boole设置为true。