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

如何在Primefaces数据表中为每列定义不同的上下文菜单？将

放入

中无法正常工作。我希望上下文菜单根据用户右键单击的列而有所不同

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

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

可选属性定义上下文菜单附加到哪个组件。如果未定义for，则将contextMenu附加到页面，表示右键单击页面上的任意位置将显示该菜单

这就是

contextMenu

标记的含义。所以，按照你的方式，它被附加到页面上。使用for属性，您将能够与Primefaces组件集成，但可能无法与特定的表列集成

另外，

Datatable

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

---

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

另一种方法是使用p:menuButton。 p:menuButton可以更改为类似于p:contextMenu 这都是关于styleClass的

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

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

.contextButton.ui按钮{边框：无；背景：无；}

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

在p:menuButton中使用自定义样式类

P:此处的菜单项

您可以参考工作示例

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

我也尝试了“for”属性-应该在原始问题中提到。通常，您可以将“for”属性替换为将组件放置在目标组件中。无论如何，这将导致错误java.lang.ClassCastException:org.primefaces.component.column.column无法转换为org.primefaces.component.api.Widget。不过，通过使用自定义Javascript代码，应该可以将上下文菜单附加到特定的列上……您有没有发现这个问题？还没有。我现在正忙于其他任务，所以我需要几天时间才能尝试@kian的解决方案。我喜欢这个想法——这可能是最接近我需要的。通过一些调整，还可以在右键单击时触发菜单按钮，从而模拟上下文菜单。我想这是唯一的解决办法。不，这不行。这只是在每列中放置一个特定的上下文菜单。根本不是我想要的。哦，天哪。对不起，荣克，我是个白痴。我知道这个问题甚至不是我的问题。哦，这很有趣，一点也没有：）这是我的问题，被一个白痴stackoverflow成员错误地作为这个问题的副本关闭了：帮我回答，50+是你的。对我来说，声誉没有意义，我已经测试过了，它对我来说很好，我只是想帮助其他人！

                 <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>