9

如何在 Primefaces 数据表中为每一列定义不同的上下文菜单？放入<p:contextMenu>内部<p:column>无法正常工作。我希望上下文菜单根据用户右键单击的列而有所不同。

这不起作用（为所有列创建相同的上下文菜单）：

<p:dataTable value="#{values}" var="value" selectionMode="single" selection="#{selectedValue}" id="table">
    <p:column headerText="Col 1">
        <h:outputText value="#{value.balance}">
            <f:convertNumber type="currency"></f:convertNumber>
        </h:outputText>
        <p:contextMenu>
            <p:menuitem value="Report"></p:menuitem>
            <p:menuitem value="Change"></p:menuitem>
        </p:contextMenu>
    </p:column>
    <p:column headerText="col 2" >
        <h:outputText value="#{value.balance2}">
            <f:convertNumber type="currency"></f:convertNumber>
        </h:outputText>
    <p:contextMenu>
        <p:menuitem value="Something else"></p:menuitem>
    </p:contextMenu>
    </p:column>
</p:dataTable>

如何通过使用 PF 组件、扩展 PF 组件或添加自定义 JavaScript 在 Primefaces dataTable 中添加特定于列的上下文菜单？

4

3 回答 3

7

你试过了吗（我刚刚用 Primefaces 3.5 测试过）： ContextMenu 可以附加到任何 JSF 组件，primefaces 数据表中的每一行都有私有和动态 id（例如：：carList：0：test1：carList：1：test1 .. .)，所以我认为你应该在列内使用 contextMenu：

                 <p:column headerText="Model">  
                    <p:panel id="test1">
                        <h:outputText value="#{carr.model}" />
                        <p:contextMenu for="test1" widgetVar="cMenu">
                            <p:menuitem value="Edit Cell" icon="ui-icon-search"
                                        onclick="product.showCellEditor();return false;" />
                            <p:menuitem value="Hide Menu" icon="ui-icon-close"
                                        onclick="cMenu.hide()" />
                        </p:contextMenu>
                    </p:panel>
                </p:column>  
                <p:column headerText="MANUFAC" style="width:20%">  
                    <p:panel id="test2">
                        <h:outputText value="#{carr.manufacturer}" />
                        <p:contextMenu for="test2" widgetVar="cMenu2">
                            <p:menuitem value="Edit Cell" icon="ui-icon-search"
                                        onclick="product.showCellEditor();return false;" />
                            <p:menuitem value="Hide Menu" icon="ui-icon-close"
                                        onclick="cMenu2.hide()" />
                            <p:menuitem value="Hide Menu" icon="ui-icon-close"
                                        onclick="cMenu2.hide()" />
                        </p:contextMenu>
                    </p:panel>
                </p:column>

如果要指定行：

<p:column headerText="Model" style="width:30%">  
                    <p:panel id="test1">
                        <h:outputText value="#{carr.model}" />
                        <p:contextMenu rendered="#{carr.model eq 'SENT'}" for="test1" widgetVar="cMenu">
                            <p:menuitem value="Edit Cell" icon="ui-icon-search"
                                        onclick="product.showCellEditor();return false;" />
                            <p:menuitem value="Hide Menu" icon="ui-icon-close"
                                        onclick="cMenu.hide()" />
                        </p:contextMenu>
                        <p:contextMenu rendered="#{carr.model eq 'WAITING'}" for="test1" widgetVar="cMenu3">

                            <p:menuitem value="Hide Menu" icon="ui-icon-close"
                                        onclick="cMenu3.hide()" />
                        </p:contextMenu>
                    </p:panel>
                </p:column>
于 2013-04-20T13:57:04.147 回答
4

另一种方法是使用 p:menuButton 代替。p:menuButton 可以更改为看起来像 ap:contextMenu 它都是关于 styleClass。

  1. 创建自定义样式类以更改向下箭头

    .contextButton .ui-state-default .ui-icon{
    background:url(YOUR_IMAGE_PATH);
}

  2. 创建自定义样式类以隐藏按钮边框和背景

    . contextButton .ui-button { 边框：无；背景：无；}

    . contextButton .ui-button.ui-state-hover，.ui-button.ui-state-focus，.ui-button.ui-state-active { 边框：无；背景：无；}

  3. 在 p:menuButton 中使用自定义 styleClass

    <p:menuButton value="" styleClass=" contextButton ">
    P:MENUITEM HERE
    </p:menuButton>

您可以在此处参考工作示例

于 2013-04-12T15:18:35.887 回答
2

可选的属性定义 contextMenu 附加到哪个组件。当未定义for时，contextMenu附加到页面含义，在页面任意位置右击会显示菜单。

这就是Primefaces 文档对contextMenu标签的描述。因此，按照您的方式，它附加到页面含义。使用for属性，您将能够与 Primefaces 组件集成，但可能无法与特定的表列集成。

文档还Datatable建议您只能在对表格进行选择时这样做，因为它似乎有特殊的方法可以使其适应树节点。

但是，我强烈建议您在询问之前查看文档。

于 2013-01-31T21:34:24.127 回答