Primefaces标签页视图：在选项卡更改时设置活动索引

Question

我有一个包含两个选项卡的标签视图。

当我从选项卡1切换到选项卡2时，我会调用一些代码来执行验证并更新某些值。根据此验证的结果，我想要保留在选项卡1上，或转到选项卡2，并刷新选项卡内容。

我的标签视图：

<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>

我的测试代码仅仅改变了这些值：

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

我认为我的方法中改变活动选项卡索引就足够了，像这样：

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

在 tabChange 事件中，该方法被调用，但 tabview 组件会跳转到被点击的选项卡，并忽略 idx 的新值。

我认为在 p:ajax 中添加 update 属性会渲染整个 tabview，但实际上只会重新渲染选项卡和/或选项卡内容。

最奇怪的是，如果我将 update=":form:tabview" 更改为 update=":form" 或 update="@form"，我只能在 AJAX 响应中收到选项卡内容 -> 组件从页面中消失了！

我的 Bean 是视图范围内的，我正在使用 Primefaces 3.5、JSF 2.1 和 Tomcat 7。

有什么想法吗？谢谢。

- Virginie

Answer 1

尝试将您的TabView绑定到后端组件实例上。

1.在后端bean中添加TabView组件实例。

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

以及相应的 getter 和 setter

public TabView getTabview() {
    return tabview;
}

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

2.将服务器端实例绑定到您的TabView

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

3. 修改你的 doStuff() 方法

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

希望它能解决问题。

- Dusan Kovacevic

---

很多人点赞，但只有在完全更新选项卡后才有效。然后最好不要使用绑定，而是使用tabIndex=#{yourbean.idx}。 - Kukeltje

注意：对于阅读上述评论的任何人，应该是 activeIndex="#{myBean.tabIndex}" 而不是 tabIndex。 - Addison

Answer 2

我可以用以下方法轻松解决这个问题：

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

在当前的数据中，我有一个名为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>

- Hadatko

---

这种解决方案相比使用activeIndex属性的优点在于，tabView不需要完全更新。 - Kukeltje

Answer 3

尝试将您的选项卡视图保持在面板网格中，更新此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>

- Java

---

我已经尝试过了，但是它并没有改变任何东西。只有选项卡的内容在响应中，因此选项卡视图容器“消失”了。 - Virginie