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

Question

我对Primefaces手风琴有一个大问题. 我有一个带有标题的输出面板和一个带有 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

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

例子.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>

会议豆.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 请求，因为这是可折叠面板的默认操作。因此，我用h:form包裹了p:accordionPanel.如果检查网络流量，则可以看到活动选项卡列表如何发送到服务器。

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