7

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

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

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

任何想法？谢谢。

4

3 回答 3

10

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

1.将 TabView 组件实例添加到您的支持 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);
}

它有望解决问题。

于 2013-07-03T05:01:37.523 回答
4

我很容易解决这个问题：

  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>
于 2014-02-25T12:52:18.347 回答
0

尝试像这样将您的 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>
于 2013-05-17T07:43:17.097 回答