JSF选项卡视图和datatable update属性更改选项卡视图id

JSF选项卡视图和datatable update属性更改选项卡视图id,jsf,primefaces,datatable,tabview,panelgrid,Jsf,Primefaces,Datatable,Tabview,Panelgrid,我有一个tabView,它有3个选项卡,每个选项卡中都有一个panelGrid和dataTable,我想从panelGrid向dataTable添加一条记录,当我这样做时,我希望tabView移动到下一个选项卡,第二个选项卡中也一样,一切正常,但我的问题是,当我从dataTable中选择一条记录时,我想将panelGrid更改为与所选信息相同的信息,然后移动到下一个选项卡并在那里编辑信息,只有在我添加了一条新记录,然后选项卡转到下一个选项卡时,它才能正常工作,但是,当我返回并从dataTable

我有一个tabView,它有3个选项卡,每个选项卡中都有一个panelGrid和dataTable,我想从panelGrid向dataTable添加一条记录,当我这样做时,我希望tabView移动到下一个选项卡,第二个选项卡中也一样,一切正常,但我的问题是,当我从dataTable中选择一条记录时,我想将panelGrid更改为与所选信息相同的信息,然后移动到下一个选项卡并在那里编辑信息,只有在我添加了一条新记录,然后选项卡转到下一个选项卡时,它才能正常工作,但是,当我返回并从dataTable中选择另一个数据时,它不会移动到下一个选项卡,我无法找出我做错了什么

这是我的标签代码:

    <h:form id="frmExamBank" widgetVar="accordionPanelWidget">
        <p:tabView widgetVar="tabWidget" id="tabsId"
            activeIndex="#{mbCoursesExamBank.activeIndexTab}">
            <p:tab title="Course Exam Bank" id="tab1">
                <ui:include src="/pages/instructors/test.xhtml" />
            </p:tab>
            <p:tab title="Course Exam Questions" id="tab2" disabled="true">
                <ui:include src="/pages/instructors/questions.xhtml" />
            </p:tab>
            <p:tab title="Course Exam Answers" id="tab3" disabled="true">
                <ui:include src="/pages/instructors/answers.xhtml" />
            </p:tab>
        </p:tabView>
    </h:form>
这是我的panelGrid:

    <p:panelGrid columns="4" id="pnlCoursesExamBankData">
        <f:facet name="header">
            <div align="center">#{msg2.get('course_exam_bank')}</div>
        </f:facet>

        <p:outputLabel value="#{msg2.get('course')}" for="course" />
        <p:selectOneMenu id="course" value="#{mbCoursesExamBank.entity.course}"
            required="true" converter="omnifaces.SelectItemsIndexConverter"
            label="#{msg2.get('course')}" filter="true" filterMatchMode="contains">
            <f:selectItems value="#{mbCourses.all}" var="course"
                itemLabel="#{course.fullName}" itemValue="#{course}" />
        </p:selectOneMenu>

        <p:outputLabel value="#{msg2.get('exam_category')}" for="examCategory" />
        <p:selectOneMenu id="examCategory"
            value="#{mbCoursesExamBank.entity.examCatogory}" required="true"
            converter="omnifaces.SelectItemsIndexConverter"
            label="#{msg2.get('exam_category')}">
            <f:selectItem itemLabel="#{msg2.get('select_category')}"
                itemValue="#{null}" noSelectionOption="true" />
            <f:selectItems value="#{mbExamCategory.all}" var="category"
                itemLabel="#{category.name}" itemValue="#{category}" />
        </p:selectOneMenu>

        <f:facet name="footer">
            <div align="center">
                <p:commandButton value="#{msg2.get('add')}"
                    action="#{mbCoursesExamBank.addCoursesExamBank()}"
                    update="@parent,@parent:tblCoursesExamBank,frmExamBank:tabsId"
                    process="@parent:pnlCoursesExamBankData" icon="btn-icon fa fa-plus" />
                <p:commandButton value="#{msg2.get('save')}"
                    action="#{mbCoursesExamBank.update()}"
                    update="@parent,@parent:tblCoursesExamBank"
                    process="@parent:pnlCoursesExamBankData"
                    icon="btn-icon fa fa-floppy-o" />
                <p:commandButton value="#{msg2.get('delete')}"
                    action="#{mbCoursesExamBank.delete()}"
                    update="@parent,@parent:tblCoursesExamBank"
                    process="@parent:pnlCoursesExamBankData"
                    icon="btn-icon fa fa-pencil" />

            </div>
        </f:facet>
    </p:panelGrid>
这是我的数据表:

    <p:dataTable paginatorPosition="bottom" id="tblCoursesExamBank"
        value="#{mbCoursesExamBank.all}" var="bank" selectionMode="single"
        selection="#{mbCoursesExamBank.entity}" rowKey="#{bank.id}"
        rowIndexVar="rowIndex" paginator="true" rows="6">
        <p:ajax  event="rowSelect"
            update="@parent:pnlCoursesExamBankData,frmExamBank,frmExamBank:tabsId"
            process="@this" />
        <p:column headerText="#" width="10%">
                            #{rowIndex+1}
                        </p:column>
        <p:column headerText="#{msg2.get('course')}"
            filterBy="#{bank.course.name}" sortBy="#{bank.course.name}"
            filterMatchMode="contains">
                        #{bank.course.name}
                        </p:column>
        <p:column headerText="#{msg2.get('exam_catogory')}"
            filterBy="#{bank.examCatogory.name}"
            sortBy="#{bank.examCatogory.name}" filterMatchMode="contains">
                        #{bank.examCatogory.name}
                        </p:column>

    </p:dataTable>
。。。我的问题是当我从dataTable中选择一条记录时…它 如果我添加了一条新记录,则该选项卡可以转到下一条 一个,但当我返回并从dataTable中选择另一个数据时 它不会移动到下一个选项卡

正如您所发现的,在同一视图中使用多个Primefaces选项卡可能非常棘手

在多个选项卡之间进行选择的一种可能过于复杂的方法是在页面bean上使用actionListener。在本例中,您可以将侦听器与数据表事件rowSelect关联

在actionListener中,使用Primefaces方法调用客户端: RequestContext.getCurrentInstance.executeselectTabdesiredTabNumber

请注意,函数名selectTab必须实际存在于客户端代码中,如下所示:

<script type="text/javascript">
    function selectTab(index) {
      if(typeof tabWidget != 'undefined') {
         tabWidget.select(index);
      } else {
        alert("Can't select tab " + index);
      }
    }
</script>
以下是针对您关于更好或更简单方法的问题所做的编辑

另一种可能更可靠的方法是不尝试在同一页面上的多个选项卡之间管理模型状态。相反,可以使用设置一系列页面:

JavaServerFaces技术的Faces-Flows特性允许您创建一组具有作用域FlowScope的页面,该作用域大于请求作用域但小于会话作用域。例如,您可能希望为在线商店中的结账过程创建一系列页面。您可以创建一组自包含的页面,这些页面可以根据需要从一个存储转移到另一个存储


谢谢你,伙计,你能建议一个更好或更简单的方法来完成我的任务吗?