通过单击展开呈现的 <p:panel> 内容答案

【问题标题】：Rendered <p:panel> content by click on expand通过单击展开呈现的 <p:panel> 内容
【发布时间】：2017-04-12 21:20:22
【问题描述】：

目前我有一个 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" 加载面板关闭，但面板内的信息已呈现，我需要该信息仅在以下情况下呈现用户展开面板。

我该怎么做？

【问题讨论】：

你的意思是它仍然呈现<h:panelGrid>而不点击<p:panel>？

标签： javascript jquery jsf primefaces frontend

【解决方案1】：

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

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

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

【讨论】：

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

或在现有的panel 上添加p:ajax

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

与

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

并在 onToggle() 中将 boole 设置为 true。

【讨论】：