Как показать детали текущей строки из p:dataTable в диалоге a p: и обновить после сохранения

У меня есть приложение JSF 2, которое имеет две страницы: одну для отображения списка учеников и одну для отображения сведений о конкретном ученике. Страница листинга содержит ссылку на страницу сведений в каждой строке таблицы учеников, которая открывает новую вкладку в браузере для отображения этих сведений при нажатии.

Теперь требования изменены, чтобы больше не отображать детали на новой вкладке, а в модальном диалоге на странице списка.

Моя идея состоит в том, чтобы просто встроить содержимое страницы с подробностями в модальное диалоговое окно, чтобы страница листинга не стала слишком большой и сложной для обслуживания. Здесь начинаются мои сомнения. После некоторых исследований я изменил ссылку в каждой строке списка на следующую кнопку:

<p:commandButton value="Details" type="button"
                 onclick="PF('dialog-details').show()">
</p:commandButton>

Диалог объявлен следующим образом:

<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
    <ui:include src="student_details.xhtml">
        <ui:param name="id" value="#{student.id}"/>
    </ui:include>
</p:dialog>

Наконец, страница с подробностями была изменена на что-то вроде этого:

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <f:metadata>
        <f:viewParam name="id" value="#{studentBean.id}" />
    </f:metadata>

    <h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>                       

Когда я нажимаю кнопку, диалоговое окно действительно отображается, а содержимое представляет собой страницу сведений. Я вижу следующее содержание в диалоге:

Details of  / 

Нет ошибок вообще, но данные, которые должны быть показаны, нет. Точка останова была установлена ​​в StudentBean.setId() (этот метод загружает свойство с именем bean с Student экземпляр, соответствующий переданному идентификатору), но он никогда не ударил.

Подумав немного, я понял, почему это не работает. Параметр, передаваемый на страницу сведений student.id, но student это имя используется в качестве var в <p:datatable/> что показывают все студенты, так student не действует в <p:dialog/> который находится за пределами <p:datatable/>,

Итак, мне нужен способ показать диалог, используя идентификатор соответствующего студента в данной строке. В идеале, я бы хотел, чтобы здесь был вызов ajax, чтобы детали загружались только при необходимости.

Есть идеи?

1 ответ

Решение

Кнопка должна быть кнопкой Ajax, которая устанавливает итеративную сущность в bean-компоненте, а затем обновляет содержимое диалога и, наконец, показывает его. Диалог должен просто ссылаться на эту сущность в бине и обновлять список и таблицу при сохранении.

Вот начальный пример:

<h:form id="master">
    <p:dataTable value="#{bean.entities}" var="entity">
        <p:column>#{entity.property1}</p:column>
        <p:column>#{entity.property2}</p:column>
        <p:column>#{entity.property3}</p:column>
        ...
        <p:column>
            <p:commandButton value="View" action="#{bean.setEntity(entity)}" 
                update=":detail" oncomplete="PF('detail').show()" />
        </p:column>
    </p:dataTable>
</h:form>

<p:dialog id="detail" widgetVar="detail">
    <h:form>
        <p:inputText value="#{bean.entity.property1}" />
        <p:inputText value="#{bean.entity.property2}" />
        <p:inputText value="#{bean.entity.property3}" />
        ...
        <p:button value="Close" onclick="PF('detail').hide(); return false" />
        <p:commandButton value="Save" action="#{bean.save}" 
            update=":master" oncomplete="PF('detail').hide()" />
    </h:form>
</p:dialog>

С этим внутри @ViewScoped боб:

private List<Entity> entities; // +getter
private Entity entity; // +getter+setter

@EJB
private EntityService entityService;

@PostConstruct
public void load() {
    entities = entityService.list();
    entity = null;
}

public void save() {
    entityService.save(entity);
    load();
}

Смотрите также:

Другие вопросы по тегам