Primefaces tabview：設置選項卡變化的活動索引

Question

我有一個包含兩個選項卡的選項卡視圖。

當我從標籤1切換到標籤2時，我調用了一些執行驗證並更新了一些值的代碼。根據驗證的結果，我想留在標籤1上，或者轉到標籤2，並刷新標籤的內容。

我TabView的：

<h:form id="form"> 
    <p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> 
     <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:tabview"/> 
     <p:tab title="Tab 1" id="t1"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s1}"/> 
      </h:panelGrid> 
     </p:tab> 
     <p:tab title="Tab 2" id="t2"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s2}"/> 
      </h:panelGrid> 
     </p:tab> 
    </p:tabView> 
</h:form> 

我的測試代碼simly改變值：

public void doStuff() { 
    s1 = String.valueOf(Math.random()); 
    s2 = String.valueOf(Math.random()); 
} 

我認爲改變我的方法激活Tab鍵索引就足夠了，這樣的：

public void doStuff() { 
    // ... 
    idx = 0; 
} 

在tabChange事件上，該方法被調用，但tabview組件轉到點擊的ta b，忽略idx新值。

我認爲將更新屬性添加到p:ajax會渲染整個tabview，但只有製表符和/或製表符的內容被渲染。

而最奇怪的是，如果我將update=":form:tabview"更改爲update=":form"或update="@form"，我只收到ajax響應中的選項卡內容 - >組件從頁面中消失！

我bean是viewscoped，我使用Primefaces 3.5，JSF 2.1和Tomcat 7

任何想法？謝謝。

Answer 1

儘量保持你在TabView的像panelGrid的這種方式並更新此h:panelgrid

h:panelGrid id="mainPanel"> 

<p:tabView id="tabview" activeIndex="#{ctrl.idx}" dynamic="true" cache="false"> 
     <p:ajax event="tabChange" listener="#{ctrl.doStuff}" update=":form:mainPanel"/> 
     <p:tab title="Tab 1" id="t1"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s1}"/> 
      </h:panelGrid> 
     </p:tab> 
     <p:tab title="Tab 2" id="t2"> 
      <h:panelGrid columns="1" cellpadding="10"> 
       <h:outputText value="#{ctrl.s2}"/> 
      </h:panelGrid> 
     </p:tab> 
    </p:tabView> 


</h:panelGrid> 

Answer 2

嘗試將TabView的服務器端組件實例綁定在支撐bean。

1.增加TabView的組件實例來支撐bean

org.primefaces.component.tabview.TabView tabview=null; 

和coresponding getter和setter

public TabView getTabview() { 
    return tabview; 
} 

public void setTabview(TabView tabview) { 
    this.tabview = tabview; 
} 

2.Bind服務器端實例您TabView的

<p:tabView id="tabview" binding=#{yourBean.tabview} dynamic="true" cache="false"> 
... 
</p:tabView> 

3 。修改您的doStuff（）方法

public void doStuff() { 
    // ... 
    //idx = 0; 
    tabview.setActiveIndex(0); 
} 

它會希望做的伎倆。

Answer 3

我容易解決這一問題：

public void onSPTabChange(TabChangeEvent event) 
    { 
    TabView tabView = (TabView) event.getComponent(); 
    currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1); 
    } 

在CURRENTDATA我有標籤的數量屬性SP_Index（第一，第二....）

<p:tabView id="tabView" styleClass="tabView"> 
<p:ajax event="tabChange" listener="#{dataAccess.onSPTabChange}" /> 
.... 

，並添加jQuery腳本

<script> 
    $("#tabView li:nth-child(#{currentData.SP_Index})").click(); 
</script>