4

我不知道这是否可能仅使用 primefaces 和 JSF，但我有一个面板，它在 View Entry 上折叠。我可以打开具有触发面板更新的复选框的面板。

问题是当面板被 Ajax 更新时，面板又被折叠了。但我想保留面板当前的打开状态。它不应该关闭更新。这可能吗？

我使用 PF 3.2 和 JSF2.1

<p:fieldset style="width:200px;height:300px;overflow:auto;">

        <h:outputLabel value="Available Applications"
    style="font-weight: bold;font-size: 14px;" />
                <br />
                <br />
                <h:panelGroup>

                    <ui:repeat var="category"
                        value="#{epsEditController.subscriptionCategoryVOs}">

                        <p:panel header="#{category.applicationCategory.name}"
                            id="panell" toggleable="true" closable="false" toggleSpeed="500"
                            collapsed="true"
                            widgetVar="panel_#{category.applicationCategory.name}">

                            <h:panelGrid columns="2" border="0">
                                <h:outputLabel value="Select all"
                                    style="font-weight: bold;float:left;" />
                                <p:selectBooleanCheckbox value="#{category.allSelected}">
                                    <p:ajax event="change"
                                        listener="#{epsEditController.selectionChanged(category)}"
                                        update="panell" />
                                </p:selectBooleanCheckbox>
                            </h:panelGrid>

                            <ui:repeat var="subcat"
                                value="#{category.applicationSubcategoryVOs}">

                                <p:selectBooleanCheckbox value="#{subcat.selected}"
                                    title="#{subcat.applicationSubcategory.name}"
                                    itemLabel="#{subcat.applicationSubcategory.name}" />

                </ui:repeat>

                </p:panel>
            </ui:repeat>
        </h:panelGroup>
    </p:fieldset>
4

1 回答 1

5

每次更新后面板折叠的原因是在面板上使用了静态collapsed="true"。这可以通过以下两种方式之一修复

  • 只是更新面板的内容而不是面板
  • 通过 ajax 跟踪面板折叠状态的状态并将该状态用作collapsed属性的值

更新内容

通过将表单放在面板中并仅更新该表单，您可以有效地更新内容而不是面板。这确保只有表单被刷新并且面板状态保持不变。

                <p:panel header="#{category.applicationCategory.name}" id="panell"
                    toggleable="true" closable="false" toggleSpeed="500"
                    collapsed="true"
                    widgetVar="panel_#{category.applicationCategory.name}">

                    <h:form id="epsAppForm">

                        <h:panelGrid columns="2" border="0">
                            <h:outputLabel value="Select all"
                                style="font-weight: bold;float:left;" />
                            <p:selectBooleanCheckbox value="#{category.allSelected}">
                                <p:ajax event="change"
                                    listener="#{epsEditController.selectionChanged(category)}"
                                    update="@form" />
                            </p:selectBooleanCheckbox>
                        </h:panelGrid>

                       ........
                    </h:form>
                </p:panel>

使用 EL 代替固定值

您可以将 EL 放在collapsed属性中而不是 fixedcollapsed="true"中。就像是

collapsed="#{myBean.toggleStates[category.applicationCategory]}"

然后，您可以通过 ajax 调用跟踪面板的状态

<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />

...'myBean' 代码：

Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();

... prepopulate toggleStates on @init or something

public void toggleState(ApplicationCategory myCategory) {
    toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}
于 2012-05-30T16:10:49.457 回答