JSF tabview и атрибут datatable update для изменения идентификатора tabview
У меня есть tabView, который имеет 3 вкладки, на каждой вкладке есть panelGrid и dataTable, я хотел бы добавить запись в dataTable из panelGrid, и когда я это сделаю, я хочу, чтобы tabView перешел на следующую вкладку, и то же самое на второй вкладке, все идет хорошо, но моя проблема в том, что когда я выбираю запись из таблицы данных, я хочу изменить панель Grid на ту же информацию, которая была выбрана, затем перейти на следующую вкладку и редактировать информацию там, это работает хорошо, только если я добавил новую запись, вкладка переходит к следующей, но когда я возвращаюсь и выбираю другие данные из таблицы данных, она не перемещается на следующую вкладку, я не могу понять, что я делаю неправильно.
Вот мой код вкладок:
<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>
И вот моя панель Grid:
<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>
1 ответ
... моя проблема в том, что когда я выбираю запись из dataTable... она работает нормально, только если я добавил новую запись, вкладка переходит к следующей, но когда я возвращаюсь и выбираю другие данные из dataTable, это не перейти к следующей вкладке...
Как вы обнаружили, использование нескольких вкладок Primefaces в одном представлении может быть очень сложным.
Один (возможно, слишком сложный) подход к выбору между несколькими вкладками заключается в использовании 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 для настройки ряда страниц:
Функция Faces Flows в технологии JavaServer Faces позволяет создавать набор страниц с областью FlowScoped, которая больше, чем область запроса, но меньше, чем область сеанса. Например, вы можете создать серию страниц для оформления заказа в онлайн-магазине. Вы можете создать набор автономных страниц, которые могут быть перенесены из одного магазина в другой по мере необходимости.