Question

我正在使用primefaces来显示数据：

我的数据库中有一个列，它是一个图像，我想要的是当我在图像中显示时，p：对话框显示具有大尺寸的图像。

我做了，但是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：对话框从数据中删除。

Answer 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>

commandButton的动作如下：

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而不是支持Bean中更新/显示对话框。

Answer 2

这是常见的widgetvar冲突。想想在datatable中呈现了多少个p：对话框，以及每个对象的widgetvar是什么？检查您渲染的页面以获得更好的想法。

要解决此问题，请使用一些图片ID并将其传递给自定义javascript或在烘焙bean中创建属性（例如“selectedBookImage”）并从<p:dialog>

中引用它

。使用此技术，您可以轻松地将p：dialog移动到数据表之外。

如何在数据表中的p：对话框中显示图像

2 个答案: