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

Question

我有一个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> 

这里是我的dataTable：

<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

...我的问题是当我选择创纪录的fr OM DataTable中...它 工作正常，只有当我添加一个新的记录选项卡去下一个 ，但是当我回去从DataTable中 选择另一个数据不会移动到下一个标签...

正如您发现的，在同一视图中使用多个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技术允许您创建一组与范围，FlowScoped页，即大于请求范围，但小于会话范围。例如，您可能想要为在线商店中的结帐过程创建一系列页面。您可以创建一组独立的页面，并根据需要将其从一个商店转移到另一个商店。