选项卡视图的活动索引不会自动更新



活动索引不会自动更新。ReaD 在一些帖子中,通过将选项卡视图放在表单上它可以工作。或者通过在选项卡视图中包含<p:ajax event="tabChange"/>,它可以工作。但似乎没有任何效果

.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:在选项卡上更新更改事件

  <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"事件中的单元格。但是活动索引始终为 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();
    }

但该事件并没有被重创。也不会自动更新。

可能出现的问题是什么?

谢谢希卡

当选项卡不包含在表单中但每个选项卡都包含自己的选项卡时,这对我有用:

  1. 将侦听器添加到选项卡更改事件到选项卡视图组件:

    <p:ajax>
  2. 从底层 TabView 组件获取活动索引似乎不起作用。但是,在这种情况下,新选择的选项卡会正确更新,因此我们可以通过搜索 TabView 的子组件来获取索引:

   public void onTabChange(TabChangeEvent event(    {          TabView tabView = (TabView( event.getComponent((;        activeTab = tabView.getChildren((.indexOf(event.getTab(((;    }

我希望这也对你有用

以下内容对我有用:

.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();
}

对于素数>= 5.0请使用以下代码:

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

这似乎仅在活动索引未绑定到托管 Bean 时才有效。但这对我来说毫无用处,因为我想保持支持豆视图同步。我很惊讶Primefaces团队还没有解决它(我正在使用3.5版本(。但是,如果p:tabView本身包装到h:form中,而不是每个选项卡都有一个,则它可以工作,但这会使您更改提交上下文。

<p:column id="barCode">
     <h:inputText id="barCodeInputTxt" value="#{articlePromo.barCode}"
            styleClass="inputTextStyle"   onchange="onSuggestedValueChange('categoryTabView',
   #{promotionDetailBean.activeTabIndex}, 
    'promotionDetail_dataTable',#{rowIndex},
    'originalCostInputTxt')" />    **_____/>_____**
</p:column>
  1. 您有一个额外的/>
  2. 立即 true 可能会导致 P:AJAX 出现问题,当您没有验证或尝试取消操作时,应使用立即 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。

在你的

xhtml中,你调用的是listener="#{promotionDetailBean。onTabChange}",但在您的 Bean 中,方法名称是"public void tabChanged"。所以它不能触发。

我在 prime-showcase 上尝试过一个例子:

在 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

--------0

--------阿拉伯数字

--------阿拉伯数字

我用以下方法轻松解决此问题:

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>
public final void onTabChange(final TabChangeEvent event) {
    TabView tv = (TabView) event.getComponent();
    this.activeTabIndex = tv.getIndex();
}

这对我有用...

最新更新