在 primefaces <p:tabView> 中停止 TabChange答案

【问题标题】：Stop TabChange in primefaces <p:tabView>`在 primefaces <p:tabView> 中停止 TabChange
【发布时间】：2015-07-17 17:56:43
【问题描述】：

我正在使用 Primefaces 5 并使用具有多个标签的。

在每个选项卡中，我都有一个数据表，可以根据用户操作进行编辑或不可编辑。

如果用户正在编辑一行，我想留在同一个选项卡中并防止选项卡更改，否则转到单击的选项卡。我该怎么做？？

这是我的 xhtml：

<p:tabView  id="customerTab"
            orientation="left"
            dynamic="false"
            cache="false" 
            widgetVar="detailsTab" 
            activeIndex="#{myBean.activTab}"
            >

     <p:ajax  event="tabChange" listener="#{myBean.onTabChange}" update="customerTabv" />


        <p:tab  tab1> </p:tab>
        <p:tab  tab2> </p:tab>

这是我的后台bean：

public void onTabChange(
        TabChangeEvent event) {
    if (Tab.isInEditMode()) {

        FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab().getId()
                + "You can not change the tab when you are in Edit mode!");
        FacesContext.getCurrentInstance().addMessage(null, msg);

        this.messagesTab.setActiveIndex(0);
        //          //          RequestContext.getCurrentInstance().execute("tabWidget.select(0)");
        activTab = 0;

        FacesContext.getCurrentInstance().setProcessingEvents(false);


    } else {
                TabView tabView = (TabView) event.getComponent();
                int activeIndex = tabView.getChildren().indexOf(event.getTab());
                this.messagesTab.setActiveIndex(activeIndex);
                activTab = activeIndex;
    }

}

【问题讨论】：

标签： jsf-2 primefaces tabview

【解决方案1】：

简而言之，解决方案可以归结为：

在 rowEditInit ajax 事件的 onstart 中，设置您处于编辑模式的客户端变量
在 rowEditCancel 事件的 oncomplete 中，设置您处于非编辑模式的客户端变量
在 rowEdit 事件的 oncomplete 中，设置您处于非编辑模式的客户端变量
在选项卡更改事件的 onstart 中，编写一些 javascript 来检查此编辑变量的值，如果处于编辑模式，则返回 false。 tabChange 应该不发生。如果处于非编辑模式，则返回 true 并且 tabChange 发生

对不起，我不会用一个完整的例子来为你写答案。这主要是因为我不想/没有时间编写它（由于这样的复杂性原因，我自己从未使用过内联编辑）并且认为人们从提示中“学习”更多，然后完全制定出代码。

【讨论】：

【解决方案2】：

tabView 和嵌套的动态元素（如 dataTable）有很多问题。所以我现在只使用 tabView 作为触发器。这意味着 tabView 有选项卡，但选项卡内部不是元素。我使用 ajax 侦听器对选项卡更改做出反应，并更新我的 UI 中的特定区域，该区域显示应该在选项卡内的内容。对于您的问题，这可能是一个解决方案。编辑数据表时可以忽略选项卡更改事件。或者禁用具有选项卡禁用属性的其他选项卡。

【讨论】：

【解决方案3】：

我的解决方案是一些 javascript。为了停止tabchange：

<p:tabView id="tabView" activeIndex="#{controller.tabSelected}"  onTabChange="handleTabChange(index);return false;"

检查 primefaces_user_guide_6_2 的 handleTabChange 函数。

我还需要 p:remoteCommand 将新选择的选项卡发送到 bean。

【讨论】：