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

AccordionPanel有一个名为activeIndex的属性，您可以从MB中设置此属性，以便在更新后不会更改。例如，请参阅https://www.primefaces.org/docs/vdl/6.1/core/primefaces-p/accordionPanel.html

Answer 2

基于@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”）或关闭选项卡（“ tabClosed”），则这两个p:ajax标记会触发POST请求，因为这是手风琴面板的默认操作。因此，我用p:accordionPanel包装了h:form。如果您检查网络流量，则可以看到活动选项卡列表如何发送到服务器。

请记住，我更新了周围的表格，而不是AccordionPanel本身。因此，我使用Primefaces Selectors。

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

2 个答案: