Primefaces DataTable 的特定于列的上下文菜单

Posted 2023-02-23

【中文标题】Primefaces DataTable 的特定于列的上下文菜单

【英文标题】：Column-specific context menu for Primefaces DataTable

【发布时间】：2013-01-16 02:22:03

【问题描述】：

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

【问题讨论】：

你有没有想过这个问题？

还没有。我现在正忙于其他任务，所以我要过几天才能尝试@kian 的解决方案

【参考方案1】：

你试过了吗（我刚刚用 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>  

【讨论】：

不，这不起作用。这只是为每列放置一个特定的上下文菜单。根本不是我想要的。

天哪。抱歉，RongNK - 我是个白痴。我发现这个问题甚至不是我的问题。

哦，这很有趣，什么都没有：)

这是我的问题，被一个白痴 *** 成员错误地关闭为这个问题的副本：***.com/questions/16099698/… 帮我回答，50+ 是你的。

对我来说，名声不重要，我已经测试过了，它对我来说很好，我只是想帮助其他人！

【参考方案2】：

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

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

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

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

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

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

在 p:menuButton 中使用自定义 styleClass

P:这里的菜单项

您可以参考here 的工作示例

【讨论】：

我喜欢这个想法——这可能是我在这里需要的最接近的近似值。通过一些调整，还应该可以在右键单击时触发菜单按钮，从而模拟上下文菜单。会试试这个并恢复

我也认为这是唯一的解决方案。

【参考方案3】：

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

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

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

不过，我强烈建议您在询问之前先查看文档。

【讨论】：

我也尝试过“for”属性 - 应该在原始问题中提到。通常，您可以将“for”属性替换为将组件放置在目标组件内。无论如何，这会导致错误 java.lang.ClassCastException: org.primefaces.component.column.Column cannot be cast to org.primefaces.component.api.Widget。不过，应该可以使用自定义 Javascript 代码将上下文菜单附加到特定列...