如何在 Primefaces 中使用 ContextMenu 和 ContentFlow

Question

对于蹩脚的问题提前抱歉，我对 JSF/Primefaces 还是个新手。我想将 ContextMenu 与 ContentFlow 一起使用。例如，当用户右键单击 ContentFlow 控件时，我想显示上下文菜单，其中包含删除、添加新等操作。我在 JSF 页面中的代码如下所示：

<p:contentFlow id="productpictures" 
               value="#{myviewscopedbean.productpictures}" 
               var="picture" >
     <p:graphicImage url="#{picture}" styleClass="content"/>
</p:contentFlow> 
<p:contextMenu  for="productpictures" >
     <p:menuitem value="Refresh" update="productpictures" />
     <p:separator/>
     <p:menuitem value="Add New" onclick="PF('dlgcreate').show()" />
     <p:menuitem value="Delete" actionListener="#{myviewscopedbean.removePicture}"
                                update="productpictures" />
</p:contextMenu>

我遇到的问题 - 如何确定内容流中的 'active' 图像以及如何将其传递给 myviewscopedbean.removePicture() 方法。

我找到了一些提示 here 但仍然很困惑 - 请帮忙！

Answer 1

您可以使用 p:remoteCommand 和 JQuery 获取图像并从图像标题中读取图像。下面的代码将标题作为所选图像。

您修改后的代码

   <p:contentFlow id="productpictures" 
                   value="#{myviewscopedbean.productpictures}" 
                   var="picture" >
         <p:graphicImage url="#{picture}" styleClass="content"/>
         <div class="caption">#{picture}</div>
    </p:contentFlow> 
    <p:contextMenu  for="productpictures" >
         <p:menuitem value="Refresh" update="productpictures" />
         <p:separator/>
         <p:menuitem value="Add New" onclick="PF('dlgcreate').show()" />
         <p:menuitem value="Delete" oncomplete="removePicture([{name:'selectedImage', value: $('.item.active div.caption').text()}]);"
                                     />
    </p:contextMenu>

<p:remoteCommand name="removePicture" actionListener="#{myviewscopedbean.removePicture}" update="productpictures"/>

Java

@ViewScoped('myviewscopedbean')
class MyBean{
    public void removePicture(){
       Map<String, String[]> paramValues = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterValuesMap();
       String[] selectedImages = paramValues.get("selectedImage");        
    }

}

如何在 Primefaces 中使用 ContextMenu 和 ContentFlow

How to use contextMenu with ContentFlow in Primefaces

jsf

contextmenu

primefaces

contentflow