JSF tabview 和 datatable 更新属性来改变 tabview id

Question

我有一个包含 3 个选项卡的 tabView，每个选项卡中都有一个 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>

Answer 1

...我的问题是当我从数据表中选择一条记录...它 只有当我添加新记录标签转到下一个时才能正常工作 一个，但是当我返回并选择数据表中的另一个数据时 它不会移动到下一个选项卡...

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

在多个选项卡之间进行选择的一种（可能过于复杂）方法是在页面 bean 上使用actionListener。在您的情况下，您可以将侦听器关联到数据表事件rowSelect。

在actionListener中，使用Primefaces方法调用客户端： RequestContext.getCurrentInstance().execute("selectTab(desiredTabNumber)");

注意，函数名（selectTab）必须实际存在于客户端代码中，如下：

<script type="text/javascript">
    function selectTab(index) {
      if(typeof tabWidget != 'undefined') {
         tabWidget.select(index);
      } else {
        alert("Can't select tab " + index);
      }
    }
</script>

（以下是针对您关于更好或更简单方法的问题的修改。）

另一种（可能更可靠）的方法是不尝试管理同一页面上多个选项卡之间的模型状态。相反，也许使用JSF Flow Scope 来设置一系列页面：

JavaServer Faces 技术的 Faces Flows 特性允许您创建一组页面，其范围 FlowScoped 大于请求范围但小于会话范围。例如，您可能希望为在线商店中的结帐流程创建一系列页面。您可以创建一组独立的页面，可以根据需要从一个商店转移到另一个商店。