PrimeFaces Panel在更新时崩溃 [英] PrimeFaces Panel collapses on update

问题描述

我不知道是否可以仅使用primefaces和JSF做到这一点，但是我有一个面板，该面板在View Entry中折叠了.我可以打开面板，该面板有一个复选框，该复选框会触发面板的更新.

I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.

问题在于，当面板由Ajax更新时，该面板再次折叠.但是我想保留面板的当前打开状态.它不应在更新时关闭.这可能吗?

The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?

我使用PF 3.2和JSF2.1

I use PF 3.2 and 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>

推荐答案

每次更新后面板折叠的原因是通过在面板上使用静态collapsed="true"引起的.可以通过以下两种方法之一来解决此问题

The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways

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

• Just updating the content of the panel and not the panel
• Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute

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

By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.

                <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属性中，而不是固定的collapsed="true".

Using EL instead of a fixed value

You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like

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

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

You can then keep track of the state of the pannel via ajax calls

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

...'myBean'代码:

...'myBean' code:

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

... prepopulate toggleStates on @init or something

public void toggleState(ApplicationCategory myCategory) {
    toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}

这篇关于PrimeFaces Panel在更新时崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！