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>