Question

我想要动态启用或禁用单个Tab（不是整个手风琴面板）。我尝试了以下方法，这是我的代码：

的index.xhtml

<p:accordionPanel id="accordionPanelId" widgetVar="accordionPanelWidget">
   <p:tab id="tab1" title="First Tab">
       <h:outputText value="Contents of Tab1"/>
       <h:form>
         <p:commandButton value="Enable Tab2" action="#{tabBean.buttonAction}" update=":accordionPanelId:tab2"/>
       </h:form>
   </p:tab>

   <p:tab id="tab2" title="Second Tab" disabled="#{tableBean.disableTab}">
      <h:outputText value="Contents of Tab2"/> 
   </p:tab>
</p:accordionPanel>

TabBean.java

@ManagedBean
@ViewScoped
public class TabBean implements Serializable {

    private boolean disableTab=true;

    public boolean isDisableTab() {
        return disableTab;
    }

    public void setDisableTab(boolean disableTab) {
        this.disableTab = disableTab;
    }

    public void buttonAction()
    {
        disableTab = false;
    }

}

使用上面的方法Tab2的内容显示但Tab Header仍然冻结，可能这不是上帝的方法来实现这一目标...... 请在此方法中建议任何其他方式或更改。

编辑：如果按以下方式更新整个Accordion面板，上述方法可以正常工作：

<p:commandButton value="Enable Tab2" action="#{tabBean.buttonAction}" update=":accordionPanelId"/>

但我不想更新所有标签。

Answer 1

您需要将选项卡的disabled属性绑定到您将在服务器端切换的disableTab支持bean变量。要反映您在服务器端所做的更改，然后ajax更新客户端上的<p:accordionPanel/>。使用您当前的设置，您需要做的唯一更改是：

将disabled属性绑定到您已设置的辅助bean变量

   <p:tab id="tab2" title="Second Tab" disabled="#{tabBean.disableTab}">
       <h:outputText value="Contents of Tab2"/> 
   </p:tab>

使用javascript API

启用后，自动切换到标签页

   <p:tab id="tab1" title="First Tab">
      <h:outputText value="Contents of Tab1"/>
         <h:form>
           <p:commandButton value="Enable Tab2" oncomplete="accordionPanelWidget.select(2)" action="#{tabBean.buttonAction}" update=":accordionPanelId:tab2"/>
        </h:form>
   </p:tab>

Answer 2

您必须更新所有accordionPanel才能启用/禁用标签。在这种情况下，您必须更新accordionPanelId。但是，您可以使用dynamic =＆＃34; true＆＃34; accordionPanel中的属性，以避免更新未呈现的部分。

在p：accordionPanel中动态禁用/启用p：选项卡

2 个答案: