PrimeFaces 命令按鈕不更新

Question

我正在通過按按鈕來更新 gridPanel（不應顯示餅圖/條形圖）：

<h:form>
    <div class="ui-grid ui-grid-responsive">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4">
                <p:panelGrid columns="1" layout="grid"
                    styleClass="ui-panelgrid-blank">
                    ...
                    <p:panelGrid columns="2" layout="grid" id="buttons"
                        styleClass="ui-panelgrid-blank">
                        <p:commandButton update="@form"
                            actionListener="#{buttonView.pieChart}" icon="ui-icon-disk"
                            title="Zeige Pie an" />
                        <p:commandButton update="@form"
                            actionListener="#{buttonView.barChart}" icon="ui-icon-disk"
                            title="Zeige Bar an" />
                    </p:panelGrid>
                </p:panelGrid>
            </div>
            <div class="ui-grid-col-8">
                <p>...</p>
                <p:panelGrid columns="1" layout="grid"
                    styleClass="ui-panelgrid-blank" id="charts">
                    <p:chart id="pie" type="pie" model="#{userBean.model}"
                        responsive="true" />
                    <p:chart id="bar" type="bar" model="#{chartView.barModel}"
                        style="height:300px" responsive="true" />
                </p:panelGrid>
            </div>
        </div>
    </div>
</h:form>

我的代碼不知何故似乎不起作用。

Answer 1

要隱藏和顯示圖表，您必須定義渲染屬性rendered 。 rendered屬性采用布爾值。

<p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank" id="charts">
    <p:chart id="pie" type="pie" rendered="#{buttonView.showPieChart}" model="#{userBean.model}" responsive="true" />
    <p:chart id="bar" type="bar" rendered="#{buttonView.showBarChart}" model="#{chartView.barModel}" style="height:300px" responsive="true" />
</p:panelGrid>

該值應在您的 Backing Bean 中設置，例如在buttonView 。

public class ButtonView {
...
   private boolean isShowPieChart;
   private boolean isShowBarChart;
...
}

最后切換布爾值。

<p:commandButton update="@form" actionListener="#{buttonView.pieChart}" icon="ui-icon-disk" title="Zeige Pie an" >
     <f:setActionPropertyListener target="#{buttonView.showPieChart}" value="#{!buttonView.showPieChart}" />
</p:commandButton>
<p:commandButton update="@form" actionListener="#{buttonView.barChart}" icon="ui-icon-disk" title="Zeige Bar an" >
     <f:setActionPropertyListener target="#{buttonView.showBarChart}"  value="#{!buttonView.showBarChart}" />
</p:commandButton>