#jsf #primefaces #datatable
#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.