ajax Primefaces tabview：在选项卡更改时设置活动索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16584359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Primefaces tabview: set the active index on tab change
提问by Virginie
I've got a tab view that contains two tab.
我有一个包含两个选项卡的选项卡视图。
When I switch from tab 1 to tab 2, I'm calling some code that executes a validation and updates some values. Depending on the result of this validation, I would like to stay on tab 1, or go to tab 2, and refresh the tabs' content.
当我从选项卡 1 切换到选项卡 2 时，我正在调用一些执行验证并更新一些值的代码。根据此验证的结果，我想留在选项卡 1 上，或转到选项卡 2，并刷新选项卡的内容。
My 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>
My test code that simly changes the values:
我的测试代码只是改变了这些值：
public void doStuff() {
s1 = String.valueOf(Math.random());
s2 = String.valueOf(Math.random());
}
I thought that changing the active tab index in my method would be enough, like that:
我认为在我的方法中更改活动标签索引就足够了，就像这样：
public void doStuff() {
// ...
idx = 0;
}
On tabChange event, the method is called but the tabview components goes to the clicked tab, ignoring the idxnew value.
在 tabChange 事件上，该方法被调用，但 tabview 组件转到单击的选项卡，忽略idx新值。
I thought adding an update attribute to p:ajaxwould render the whole tabview but only the tabs and/or the tabs' content is re rendered.
我认为添加一个更新属性p:ajax会呈现整个 tabview，但只重新呈现选项卡和/或选项卡的内容。
And weirdest of all, if I change update=":form:tabview"to update=":form"or update="@form", I only receive the tab's content in the ajax response -> the component disappears from the page!
最奇怪的是，如果我更改update=":form:tabview"为update=":form"or update="@form"，我只会在 ajax 响应中收到选项卡的内容 -> 组件从页面中消失！
My bean is viewscoped, I'm using Primefaces 3.5, JSF 2.1 and Tomcat 7.
我的 bean 是视图范围的，我使用的是 Primefaces 3.5、JSF 2.1 和 Tomcat 7。
Any idea? Thanks.
任何的想法？谢谢。
回答by Dusan Kovacevic
Try to bind your TabView to server side component instance in your backing bean.
尝试将 TabView 绑定到支持 bean 中的服务器端组件实例。
1.Add TabView component instance to your backing bean
1.将 TabView 组件实例添加到您的支持 bean
org.primefaces.component.tabview.TabView tabview=null;
and coresponding getter and setter
以及相应的 getter 和 setter
public TabView getTabview() {
return tabview;
}
public void setTabview(TabView tabview) {
this.tabview = tabview;
}
2.Bind server side instance to your TabView
2.将服务器端实例绑定到您的 TabView
<p:tabView id="tabview" binding=#{yourBean.tabview} dynamic="true" cache="false">
...
</p:tabView>
3.Modify your doStuff() method
3.修改你的 doStuff() 方法
public void doStuff() {
// ...
//idx = 0;
tabview.setActiveIndex(0);
}
And it will hopefully do the trick.
它有望成功。
回答by Hadatko
i easy fix this with:
我很容易解决这个问题：
public void onSPTabChange(TabChangeEvent event)
{
TabView tabView = (TabView) event.getComponent();
currentData.setSP_Index(tabView.getChildren().indexOf(event.getTab())+1);
}
in currentdata i have property SP_Index with number of tab (first,second....)
在 currentdata 我有属性 SP_Index 与选项卡数（第一，第二......）
<p:tabView id="tabView" styleClass="tabView">
<p:ajax event="tabChange" listener="#{dataAccess.onSPTabChange}" />
....
and add jquery script
并添加 jquery 脚本
<script>
$("#tabView li:nth-child(#{currentData.SP_Index})").click();
</script>
回答by Java
Try to keep your tabview in panelgrid like this way and update this h:panelgrid
尝试像这样将 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>
