更新手风琴时它不保留打开/关闭选项卡

Question

我对 Primefaces 手风琴有一个大问题。 我有一个带有标题的 outputPanel 和一个带有 2 个选项卡的手风琴。 如果我关闭第一个选项卡并更改第二个选项卡中的字段，它会打开第一个选项卡并关闭第二个选项卡。如何保持标签的状态？

这是一个简单的例子：

<p:outputPanel id="content">
    <p:outputPanel id="header" />

    <p:accordionPanel multiple="true">
        <p:tab title="firstTab">
            <p:panel>
                <p:inputText id="firstInput" value="firstInput">
                    <p:ajax event="change" update="content" />
                </p:inputText>
            </p:panel>
        </p:tab>
        <p:tab title="secondTab">
            <p:panel>
                <p:inputText id="secondInput" value="secondInput">
                    <p:ajax event="change" update="content" />
                </p:inputText>
            </p:panel>
        </p:tab>
    </p:accordionPanel>     

</p:outputPanel>

我该如何解决？有什么建议吗？

Answer 1

根据@Christian 在link 中提供的 cagatay civici 的回答，我创建了一个简单的示例，因为它对我来说不是开箱即用的。

example.xthml：

<h:form styleClass="accordionForm">
    <p:accordionPanel multiple="true"
        activeIndex="#{sessionBean.activeTabs}">

        <p:ajax event="tabChange" />
        <p:ajax event="tabClose" />
        
        <p:tab title="Tab1">
            <p:panel>
                <p:inputText id="firstInput" value="firstInput">
                    <p:ajax event="change" update="@(.accordionForm)" />
                </p:inputText>
            </p:panel>
        </p:tab>

        <p:tab title="Tab2">
            <p:panel>
                <p:inputText id="secondInput" value="secondInput">
                    <p:ajax event="change" update="@(.accordionForm)" />
                </p:inputText>
            </p:panel>
        </p:tab>

    </p:accordionPanel>
</h:form>

sessionBean.java：

@Named("sessionBean")
@SessionScoped
public class SessionBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String activeTabs = "";

    public String getActiveTabs() {
        return activeTabs;
    }

    public void setActiveTabs(String activeTabs) {
        this.activeTabs = activeTabs;
    }
}

解释：

如果选项卡打开（“tabChange”）或关闭（“tabClos​​ed”），两个p:ajax 标记会触发 POST 请求，因为这是手风琴面板的默认操作。因此，我用h:form 包裹了p:accordionPanel。如果您检查您的网络流量，您可以看到活动标签列表是如何发送到服务器的。

请记住，我更新的是周围的表单而不是手风琴面板本身。因此，我使用Primefaces Selectors。

Answer 2

AccordionPanel 有一个名为 activeIndex 的属性，你可以从你的 MB 中设置这个属性，这样它就不会在更新后改变。例如见https://www.primefaces.org/docs/vdl/6.1/core/primefaces-p/accordionPanel.html