Jsf 2 PrimeFaces 3.5：数据表中特定于行的上下文菜单

我正在使用JSF和PrimeFaces开发一个web应用程序。其中一个页面显示一个实体表，我应该向该表添加一个上下文菜单

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

更具体地说：最后一列包含一个

p:menuButton

，其内容取决于相应的行。菜单项以

ui:composition

的形式存储在另一个文件中，我只想将它们包含在上下文菜单中

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

然而，菜单项是动态的。这些实体确实有一个名为enabled的布尔成员。对于启用的实体，将显示编辑、删除和禁用。对于禁用的实体，只有“启用”

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

使用下面的代码，将显示关联菜单，但只有通过左键单击选择另一行时，内容才会更新。右键单击会选择行，但backingbean的selectedPerson不会更新

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

显然，PrimeFaces 3.5中有一些变化。我发现了许多对contextMenu ajax事件的引用

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

但当我将其添加到datatable时，如下所示：

<p:ajax event="contextMenu" update=":persons-form:contextMenu" />

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

。。菜单出现，但立即消失。大概是因为调用了某个更新方法。在显示的短时间内，我可以看到它仍然显示旧菜单项

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

因此，总结一下：如何使contextmenu在PrimeFaces 3.5的datatable中正常工作？也就是说，右键单击应选择一行，并在显示前更新菜单，因为菜单项取决于行数据。

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

​ ​

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

personList.xhtml:

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

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

    <p:menuitem rendered="#{personListBean.isEnabled(thePerson)}" outcome="edit.xhtml" value="Edit" icon="ui-icon-gear">
        <f:param name="id" value="#{thePerson.id}" />
    </p:menuitem>

    <p:menuitem actionListener="#{personListBean.deletePerson(thePerson)}"  value="Delete" update=":person-form" 
                icon="ui-icon-close" rendered="#{personListBean.isEnabled(thePerson)}"/>

    <p:menuitem actionListener="#{personListBean.toggleEnabled(thePerson)}" update=":persons-form" value="#{personListBean.toggleEnabledMenuItemLabel(thePerson)}" />

</ui:composition>

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

名称

PersonationMenu.xhtml:

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

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

    <p:menuitem rendered="#{personListBean.isEnabled(thePerson)}" outcome="edit.xhtml" value="Edit" icon="ui-icon-gear">
        <f:param name="id" value="#{thePerson.id}" />
    </p:menuitem>

    <p:menuitem actionListener="#{personListBean.deletePerson(thePerson)}"  value="Delete" update=":person-form" 
                icon="ui-icon-close" rendered="#{personListBean.isEnabled(thePerson)}"/>

    <p:menuitem actionListener="#{personListBean.toggleEnabled(thePerson)}" update=":persons-form" value="#{personListBean.toggleEnabledMenuItemLabel(thePerson)}" />

</ui:composition>

请尝试以下操作：

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

<p:contextMenu id="contextMenu" for="persons" widgetVar="ctxMenu" beforeShow="return true;">
    <ui:include src="/layout/personActionMenu.xhtml">
        <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
    </ui:include>                               
</p:contextMenu>

<p:dataTable ...>
   ...
   <p:ajax event="contextMenu" update=":persons-form:contextMenu" oncomplete="ctxMenu.show(currentEvent);" />
   ...
</p:dataTable ...>

...
...

这篇文章摘自卡纳杜克在《爱国阵线》的帖子

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>

希望这对你也有用

    <p:contextMenu id="contextMenu" for="persons">
        <ui:include src="/layout/personActionMenu.xhtml">
            <ui:param name="thePerson" value="#{personListBean.selectedPerson}"/>
        </ui:include>                               
    </p:contextMenu>

    <p:dataTable id="persons" 
                 value="#{personListBean.allPersons}" 
                 var="p"
                 rowKey="#{p.id}"
                 selection="#{personListBean.selectedPerson}" 
                 selectionMode="single"
                 rowStyleClass="#{p.enabled ? '' : 'disabledTableItem'}">

        <p:ajax event="rowSelect" update=":persons-form:contextMenu"/>

        <p:column>
            <f:facet name="header">Name</f:facet>
            <h:outputText value="#{p.name}" />
        </p:column>                 

        <p:column>
            <p:menuButton value="Actions">
                <ui:include src="/layout/personActionMenu.xhtml">
                    <ui:param name="thePerson" value="#{p}"/>
                </ui:include>
            </p:menuButton>
        </p:column>

    </p:dataTable>

</h:form>