Question

如何在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中添加特定于列的上下文菜单？

Answer 1

您是否尝试过（我刚刚使用Primefaces 3.5测试过）： ContextMenu可以附加到任何JSF组件，primefaces datatable中的每一行都有私有和动态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>

Answer 2

另一种方法是使用p：menuButton代替。 p：menuButton可以更改为p：contextMenu 这一切都与styleClass有关。

创建自定义样式列以更改向下箭头

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

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


。 contextButton .ui-button {border：none;背景：无; }

。 contextButton .ui-button.ui-state-hover，.ui-button.ui-state-focus，   .ui-button.ui-state-active {border：none;背景：无; }
使用p：menuButton
中的自定义styleClass

＆lt; p：menuButton value =“”styleClass =“ contextButton ”＆gt;

      P：MENUITEM HERE
  ＆LT; / P：菜单按钮＆GT;

您可以参考here了解工作示例

Answer 3

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

Primefaces Documentation对contextMenu标记的说法。因此，按照您的方式，它附加到页面含义。使用 for 属性，您将能够与Primefaces组件集成，但可能没有特定的表列。

此外，Datatable文档建议您只能在对表格进行选择时执行此操作，因为它似乎有特殊方式使其适应树节点。

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

Primefaces DataTable的列特定上下文菜单

3 个答案: