как отобразить изображение в диалоговом окне p: из таблицы данных

ProgramBox

как отобразить изображение в диалоговом окне p: из таблицы данных

Post author:admin
Запись опубликована:26 февраля, 2023
Post category:Вопросы по программированию

#jsf #primefaces #datatable

Вопрос:

Я использую primefaces для отображения datable :

У меня есть столбец в моей таблице данных, это изображение, я хочу, чтобы при нажатии на изображение в p: dialog отображалось изображение с большим размером.

Я сделал это, но в диалоговом окне p: отображается неправильное изображение, оно показывает изображение последней строки в таблице данных.

 <p:column headerText="imagePath">
  <h:graphicImage library="images" name="#{book.imagePath}.png" 
                  width="75px" onclick="PF('dlg').show();"/>
  <p:dialog widgetVar="dlg" resizable="f" height="600px"width="500px"onShow="js">
    <h:graphicImage  library="images" name="#{book.imagePath}.png"width="400px"/>
  </p:dialog>
</p:column>

Спасибо

Я решил проблему с компонентом commandlink

 <p:column headerText="imagePath">
  <p:commandLink update=":zaki:foo:imgDlg1" oncomplete="dlg1.show()"
                 action="#{jsfClient.showImg(book)}">
    <h:graphicImage value="/resources/images/#{book.imagePath}.png" width="75px"/>
  </p:commandLink>
</p:column>

Я вставил изображение в командную ссылку, и оно работает идеально, обратите внимание, что я удалил p: dialog из datable.

1. Вы скопировали-вставили свой код? Потому что вы потеряли a { в h:graphicImage p:dialog .

2. это не проблема, у вас есть идеи по моим проблемам?

3. Мне кажется, у вас есть несколько диалоговых окон с widgetVar=»dlg» на странице, поэтому, вероятно, он просто покажет () последний. Вместо этого я думаю, что у вас должно быть одно диалоговое окно вне таблицы, которое считывает путь к изображению из нового атрибута в компоненте — помните атрибут «rendered = …» в компоненте. Когда вы нажимаете на маленькое изображение, вы должны установить этот атрибут в компоненте, обновить диалоговое окно через ajax, а затем показать его.

Ответ №1:

Вы должны опросить диалоговое окно из DataTable и записать, какую книгу выбрал пользователь, прежде чем открывать диалоговое окно.

Взгляните на этот код:

 <p:dataTable value="#{imgBean.books}" var="book">
    <p:column headerText="imagePath">
        <h:commandButton image="/images/#{book.imagePath}.png" style="width: 75px" action="#{imgBean.showImg(book)}"/>
    </p:column>
</p:dataTable>

<p:dialog  widgetVar="dlg" id="imgDlg" resizable="f" height="600px" width="500px">
    <h:graphicImage  value="../images/#{imgBean.selectedBook.imagePath}.png" width="400px"/>
</p:dialog>

Действие командной кнопки выглядит следующим образом:

 private Book SelectedBook;

public void showImg(Book book){
    this.SelectedBook=book;
    RequestContext.getCurrentInstance().update("imgForm:imgDlg");
    RequestContext.getCurrentInstance().execute("PF('dlg').show()");
}

public Book getSelectedBook() {
    return SelectedBook;
}

Таким образом, вы можете показывать не только изображение, но и другую информацию из книги.

Кстати, вы также можете обновить / отобразить диалоговое окно в h:commandButton , а не из резервного компонента.

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

2. Изображение не отображалось в DataTable или в диалоговом окне?

3. само диалоговое окно не появилось .

4. Я пробовал этот код, и он работает в моей среде.

5. Затем попробуйте отобразить диалоговое окно в событии oncomplete вместо метода в вспомогательном компоненте.

Ответ №2:

Это обычный конфликт widgetvar. Подумайте о том, сколько p: диалоговых окон отображается в datatable и что такое widgetvar для каждого? Проверьте свою отображаемую страницу, чтобы получить лучшее представление.

Чтобы решить эту проблему, либо используйте некоторый идентификатор изображения и передайте его в пользовательский javascript, либо создайте свойство (например, «selectedBookImage») в вашем компоненте для выпечки и передайте его из <p:dialog>

. Используя эту технику, вы можете легко переместить p: dialog за пределы datatable.