用于Primefaces DataTable的特定于列的上下文菜单 [英] Column-specific context menu for Primefaces DataTable
问题描述
如何在Primefaces datatable中以不同的方式定义每个列的上下文菜单?在< p:column>
中的< p:contextMenu>
无法正常工作。我想要上下文菜单根据哪个列用户右键单击而不同。
How can I define context menu for each column differently in Primefaces datatable? Putting <p:contextMenu>
inside <p:column>
does not work properly. I want context menu to be different depending on which column user right-clicked in.
这不起作用(所有列的上下文菜单都创建相同):
This does not work (context menu is created the same for all columns):
<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组件,在Primefaces dataTable中添加列特定的上下文菜单,或添加自定义JavaScript?
How to add column-specific context menu in Primefaces dataTable either by using PF components, extending PF components, or adding custom JavaScript?
推荐答案
你尝试了(我刚刚用Primefaces 3.5进行测试):
ContextMenu可以附加到任何JSF组件,datatable中的每行都有private和dynamic id(例如:carList:0:test1:carList:1:test1 ...),所以我认为你应该在列中使用contextMenu:
Have you tried(I have just tested with Primefaces 3.5): ContextMenu can be attached to any JSF component, each of rows in primefaces datatable has private and dynamic id(ex: :carList:0:test1 :carList:1:test1 ...), so I think you should use contextMenu inside column:
<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>
这篇关于用于Primefaces DataTable的特定于列的上下文菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!