primefaces - tabview 的活动索引没有自动更新

Question

活动索引不会自动更新。在几篇文章中阅读通过将 tabView 放置在它工作的表单上。或者通过包含<p:ajax event="tabChange"/>在 tabview 中它可以工作。但似乎没有任何效果

xhtml

示例 1：自动更新

    <p:tabView id="categoryTabView" var="promoArticle" value="#{promotionDetailBean.artDTOs}"  activeIndex="#{promotionDetailBean.activeTabIndex}">
            <p:tab id="categoriesTab" title="#{promoArticle.categoryName}">
                <p:dataTable id="promotionDetail_dataTable" var="articlePromo" value="#{promoArticle.artVO}" selection="#{promotionDetailBean.selectedArt}" rowIndexVar="rowIndex">
                    <p:column id="select" selectionMode="multiple" />

                    <p:column id="barCode">
                        <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}"
                        styleClass="inputTextStyle" onchange="onSuggestedValueChange('categoryTabView',#{promotionDetailBean.activeTabIndex}, 'promotionDetail_dataTable',#{rowIndex},'originalCostInputTxt')" />
                    </p:column>
                </p:dataTable>
            </p:tab>
        </p:tabView>

示例 2：更新 tabChange 事件

  <h:form id="form">
    <p:growl id="growlm" showDetail="true" />  

            <p:tabView id="categoryTabView" var="promoArticle" value="#{promotionDetailBean.artDTOs}"  >
               <p:ajax event="tabChange" listener="#{promotionDetailBean.tabChanged}"  update=":growlm" />
                    <p:tab id="categoriesTab" title="#{promoArticle.categoryName}">
                        <p:dataTable id="promotionDetail_dataTable" var="articlePromo" value="#{promoArticle.artVO}" selection="#{promotionDetailBean.selectedArt}" rowIndexVar="rowIndex">
                            <p:column id="select" selectionMode="multiple" />

                            <p:column id="barCode">
                                <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}"
                                styleClass="inputTextStyle" onchange="onSuggestedValueChange('categoryTabView',#{promotionDetailBean.activeTabIndex}, 'promotionDetail_dataTable',#{rowIndex},'originalCostInputTxt')" />
                            </p:column>
                        </p:dataTable>
                    </p:tab>
                </p:tabView>

我需要在“onChange”事件中识别单元格。但activeIndex始终为0，即初始化值。事件没有接到电话。

豆

private Integer activeTabIndex = 0;
public Integer getActiveTabIndex() {
   return activeTabIndex;
}
public void setActiveTabIndex(Integer activeTabIndex) {
    this.activeTabIndex = activeTabIndex;
}

豆

public void tabChanged(TabChangeEvent event){
        TabView tv = (TabView) event.getComponent(); 
        this.activeTabIndex = tv.getActiveIndex();
    }

但事件并没有被触发。也不会自动更新。

可能的问题是什么？

谢谢，希哈

score 13 · Accepted Answer

当标签不包含在表单内，但每个选项卡都包含其自己的标签时，这对我有用：

将一个监听器添加到 tabView 组件的选项卡更改事件：
```
<p:ajax event="tabChange" listener="#{userBean.onTabChange}" />
```
从底层 TabView 组件获取活动索引似乎不起作用。但是，在这种情况下，新选择的选项卡会正确更新，因此我们可以通过在 TabView 的子组件中搜索来获取索引：

    公共无效 onTabChange（TabChangeEvent 事件）
    {   
        TabView tabView = (TabView) event.getComponent();
        activeTab = tabView.getChildren().indexOf(event.getTab());
    }

我希望这也适用于你

score 6 · Accepted Answer

以下对我有用：

XHTML：

<p:tabView id="categoryTabView" var="promoArticle"
        value="#{promotionDetailManagedBean.articuloPromocionDTOs}" dynamic="true">
    <p:ajax event="tabChange" listener="#{promotionDetailManagedBean.onTabChange}" />
    <p:tab> ... </p:tab>
</p:tabView>

豆：

public final void onTabChange(final TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();
    this.activeTabIndex = tv.getActiveIndex();
}

score 3 · Accepted Answer

对于 primefaces >= 5.0，请使用以下代码：

public final void onTabChange(TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();     
    this.ActiveIndex = tv.getChildren().indexOf(event.getTab());
}

score 2 · Accepted Answer

这似乎只在活动索引未绑定到托管 bean时才有效。但这对我来说没用，因为我想保持支持 bean-view 同步。我很惊讶Primefaces团队还没有解决它（我正在使用 3.5 版本）。但是，如果将p:tabView其本身包装成 ah:form而不是每个选项卡都有一个，则它可以工作，但这会使您更改提交上下文。

score 0 · Accepted Answer

<p:column id="barCode">
     <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}"
            styleClass="inputTextStyle"   onchange="onSuggestedValueChange('categoryTabView',
   #{promotionDetailBean.activeTabIndex}, 
    'promotionDetail_dataTable',#{rowIndex},
    'originalCostInputTxt')" />    **_____/>_____**
</p:column>

你有一个额外的/>

immediate true 可能会导致 p:ajax 出现问题，当您没有验证或尝试取消操作时，您应该使用 immediate true。

public void tabChange(TabChangeEvent event){
     TabView tabView = (TabView) event.getComponent();
     Tab tab = (Tab) event.getTab();
     String tabChangedMessage = tab.getTitle() + " changed. index=" + tabView.getActiveIndex();
     System.out.println(tabChangedMessage);
     FacesContext fc = FacesContext.getCurrentInstance();
     fc.addMessage(null, new FacesMessage("Tab changed", tabChangedMessage));
}

<p:tabView>
   <p:ajax event="tabChange" listener="#{tabChangeBean.tabChange}" update=":growlId" />
   <p:tab title="tab 1">
   tab1 inside
   </p:tab>
   <p:tab title="tab 2">
   tab1 inside
   </p:tab>
</p:tabView>

这有效，但活动索引为 0。

score 0 · Accepted Answer

在您的 xhtml 中，您正在调用 listener="#{promotionDetailBean.onTabChange }" 但在您的 bean 中，方法名称是“public void tabChanged ”。所以不能触发。

我在主要展示中尝试了一个示例：

在 bean (TabBean) 中：

private Integer activeTabIndex = 1;

// setter/getter

public void onTabChange(TabChangeEvent event) {
    FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab().getTitle());

    TabView tabView = (TabView) event.getComponent(); 
    int activeTabIndex = tabView.getActiveIndex();
    System.out.println("--------" + activeTabIndex);


    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> params = context.getExternalContext().getRequestParameterMap();
    String activeIndexValue = params.get(tabView.getClientId(context) + "_activeIndex");
    System.out.println("--------" + activeIndexValue);

    context.addMessage(null, msg);
}

在 xhtml (tabviewChangeListener.xhtml) 中：

<p:tabView id="tabView" dynamic="true" activeIndex="#{tabBean.activeTabIndex}">

                <p:ajax event="tabChange" listener="#{tabBean.onTabChange}" update=":form:growl"/>

                <p:tab title="Godfather Part I" id="Godfather1">

结果如预期： 在开始时显示第二个选项卡。我单击第一个选项卡，然后单击第三个选项卡。系统输出是：

--------0

--------2

score 0 · Accepted Answer

我很容易解决这个问题：

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>

score -1 · Accepted Answer

public final void onTabChange(final TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();
    this.activeTabIndex = tv.getIndex();
}

这对我有用...

primefaces - tabview 的活动索引没有自动更新

8 回答 8

Related

Reference