Primefaces tabview：在选项卡更改时设置活动索引

Posted 2023-02-23

【中文标题】Primefaces tabview：在选项卡更改时设置活动索引

【英文标题】：Primefaces tabview: set the active index on tab change

【发布时间】：2013-05-11 03:57:19

【问题描述】：

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

当我从选项卡 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=":form:tabview" 更改为 update=":form" 或 update="@form"，我只会在 ajax 响应中收到选项卡的内容 -> 组件会从页面中消失！

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

有什么想法吗？谢谢。

【参考方案1】：

尝试将您的 TabView 绑定到支持 bean 中的服务器端组件实例。

1.将 TabView 组件实例添加到您的 backing bean

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

希望它会成功。

【讨论】：

很多赞成票，但这仅在您完全更新选项卡时才有效。然后最好不要使用绑定使用tabIndex=#yourbean.idx'

请注意阅读以上评论的任何人，它应该是：activeIndex="#myBean.tabIndex"，而不是tabIndex

【参考方案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>

【讨论】：

这种方案相对于使用activeIndex属性的优势在于tabView不需要完全更新

【参考方案3】：

尝试像这样将你的 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>

【讨论】：

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