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

时间:2013-04-22 13:08:38

标签: jsf primefaces

我想要动态启用或禁用单个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"/>
  

但我不想更新所有标签。

2 个答案:

答案 0 :(得分:0)

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

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

       <p:tab id="tab2" title="Second Tab" disabled="#{tabBean.disableTab}">
           <h:outputText value="Contents of Tab2"/> 
       </p:tab>
    
  2. 使用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>
    

答案 1 :(得分:-1)

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