如何在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>
如何在Primefaces dataTable中添加特定于列的上下文菜单,通过使用PF组件,扩展PF组件或添加自定义JavaScript?
你试过吗(我刚刚用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>
方法是改用p:menuButton。p:menuButton 可以更改为看起来像 p:contextMenu这一切都与风格类有关。
创建自定义样式类以更改向下箭头
.contextButton .ui-state-default .ui-icon{ background:url(YOUR_IMAGE_PATH); }
创建自定义样式类以隐藏按钮边框和背景
.上下文按钮 .ui-button { border: none; 背景:无;}
.contextButton .ui-button.ui-state-hover, .ui-button.ui-state-focus, .ui-button.ui-state-active { border: none; 背景:无;}
在 p:menuButton 中使用自定义样式类
<p:menuButton>contextButton">
P:菜单项在这里
您可以参考此处以获取工作示例
可选的 for 属性定义上下文菜单附加到哪个组件。当未定义for时,上下文菜单附加到页面含义上,右键单击页面上的任意位置将显示菜单。
这就是Primefaces Documentation对contextMenu
标签的评价。所以,以你的方式,它附着在页面含义上。使用 for 属性,您将能够与 Primefaces 组件集成,但可能不会与特定的表列集成。
此外,Datatable
文档建议您只能在选择表时执行此操作,因为它似乎具有使其适应树节点的特殊方法。
但是,我强烈建议您在询问之前查看文档。