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頁，即大於請求範圍，但小於會話範圍。例如，您可能想要爲在線商店中的結帳過程創建一系列頁面。您可以創建一組獨立的頁面，並根據需要將其從一個商店轉移到另一個商店。