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添加更新属性会呈现整个tabview，但只会重新呈现标签和/或标签的内容。

最奇怪的是，如果我将update=":form:tabview"更改为update=":form"或update="@form"，我只会在ajax响应中收到标签的内容 - ＆gt;组件从页面中消失了！

我的bean是视图编写的，我使用的是Primefaces 3.5，JSF 2.1和Tomcat 7.

有什么想法吗？感谢。

Answer 1

尝试将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);
}

它有望成功。

Answer 2

我很容易解决这个问题：

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

在currentdata中我有属性SP_Index，其中包含tab的数量（第一，第二......）

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

并添加jquery脚本

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

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

Primefaces tabview：在标签更改上设置活动索引

3 个答案: