我有一个带有上下文菜单的分页PrimeFaces Datatable，我希望实现多选，其中上下文菜单中的菜单项将取决于所选项目的数量，因为某些操作仅在只有一个时可用选择了一个项目，其他项目在选择一个或多个项目时有效。
我的第一个想法是使用在控制器bean中设置的单个菜单项的“呈现”选项。这种工作，确实显示了正确的菜单项。问题是使用菜单项的渲染功能会导致选择在数据表上丢失，从而破坏了练习的目的。
<p:dataTable id="orders" dynamic="true" var="item" rowKey="#{item.id}" value="#{ordersController.orders}"
emptyMessage="#{uistrings['datatable.nodata']}" paginator="true" paginatorPosition="both"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
paginatorAlwaysVisible="false" rows="10" selectionMode="multiple" selection="#{ordersController.selectedOrders}" widgetVar="orderList">
<p:ajax event="sort" listener="#{ordersController.onSort}" update="orders"/>
<p:ajax event="rowSelect" update="contextMenu"/>
<p:ajax event="rowUnselect" update="contextMenu"/>
<p:column id="balance_date" sortBy="#{item.balanceDate}">
<f:facet name="header">
<h:outputText value="#{uistrings['orders.column.label.balancedate']}"/>
</f:facet>
<h:outputText value="#{item.balanceDate}">
<f:converter converterId="isoDateTimeConverter"/>
<f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_TYPE}" value="#{webUiConstBean.ISO_DATE_CLASS}" />
<f:attribute name="#{webUiConstBean.ISO_CONVERTER_ATTRIBUTE_PATTERN}" value="#{webUiConstBean.ISO_DATE_FORMAT}" />
</h:outputText>
</p:column>
<p:column id="recipient_name" sortBy="#{item.recipient.displayName}">
<f:facet name="header">
<h:outputText value="#{uistrings['orders.column.label.recipient.displayName']}"/>
</f:facet>
<h:outputText value="#{item.recipient.displayName}"/>
</p:column>
[snip]
</p:dataTable>
<p:contextMenu id="contextMenu" for="orders">
<p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
oncomplete="detailDialog.show()" icon="ui-icon-search" rendered="#{ordersController.renderDisplayDetails}" />
<p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
update="orders" ajax="true" onclick="confirmDelete.show()"
rendered="#{ordersController.renderDeleteDocuments}"/>
</p:contextMenu>
在本论坛和其他论坛寻找解决方案，找到一些提示，并自己找出一些替代方案后，我做了其他一些尝试，包括：
1）使用两个完整的上下文菜单：一个用于选择一个项目，另一个用于选择多个项目时，并使用上下文菜单本身的呈现选项，而不是其项目。
在这种情况下，rowSelect和rowUnselect事件都会更新
<p:ajax event="rowSelect" update="contextMenu1Selected contextMenuManySelected"/>
<p:ajax event="rowUnselect" update="contextMenu1Selected contextMenuManySelected"/>
上下文菜单看起来像这样
<p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.render1Selected}">
<p:menuitem value="#{uistrings['orders.menu.details']}" update="details, orders"
oncomplete="detailDialog.show()" icon="ui-icon-search"/>
<p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
update="orders" ajax="true" onclick="confirmDelete.show()"/>
</p:contextMenu>
<p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderManySelected}">
<p:menuitem value="#{uistrings['orders.button.label.delete']}" icon="ui-icon-trash"
update="orders" ajax="true" onclick="confirmDelete.show()"/>
</p:contextMenu>
但这根本不起作用。没有显示任何菜单。
2）将两个上下文菜单放在outputPanel中，然后更新面板。这与我的第一次尝试结果相同。即菜单项正确呈现但丢失了选择
<p:outputPanel id="contextMenuPanel" autoUpdate="true">
<p:contextMenu id="contextMenu1Selected" for="orders" rendered="#{ordersController.renderDisplayDocument}">
[menu items]
</p:contextMenu>
<p:contextMenu id="contextMenuManySelected" for="orders" rendered="#{ordersController.renderDeleteDocuments}">
[menu items]
</p:contextMenu>
</p:outputPanel>
3）使用控制器提供的menuModel定义contextMenu模型，控制器本身有两个模型可供两种情况使用，并根据所选项目的数量提供正确的模型。也在输出面板中
<p:outputPanel id="contextMenuPanel" autoUpdate="true">
<p:contextMenu id="contextMenu" for="orders" model="#{ordersController.menuModel}"/>
</p:outputPanel>>
这也行不通。 MenuItems正确呈现，但多次选择丢失了。
我已经筋疲力尽了我所知道的选项。
有没有人成功实现了具有多选的数据表的动态上下文菜单？
或者有没有人有任何可能有用的想法？
干杯。
答案 0 :(得分：3)
也许为时已晚，但这是我的解决方案......
使用javascript的上下文菜单：
<p:contextMenu id="searchResultTableContextMenuId" for="searchResultTableId" beforeShow="return true;"
widgetVar="searchResultTableContextMenuVar">
<p:menuitem value="#{msgs['label.resultlistAction.edit']}"
disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-pencil"
oncomplete="PF('editPropertyDialogVar').show();" update=":editPropertyFormId" />
<p:menuitem value="#{msgs['label.resultlistAction.delete']}"
disabled="#{curSelectedDocsCount le 0}" icon="fa fa-trash"
actionListener="#{deleteDocumentBL.initFromResultList()}"
oncomplete="PF('deleteDocumentsDialogVar').show();" update=":deleteDocumentsFormId" />
<p:menuitem value="#{msgs['label.resultlistAction.download']}"
disabled="#{curSelectedDocsCount ne 1}" icon="fa fa-download" ajax="false"
action="#{contentBL.downloadMainContent(curSearch.getViewId(), curSearch.selectedSearchResults.get(0))}" />
<p:menuitem value="#{msgs['label.resultlistAction.clearSelectionId']}" disabled="#{curSelectedDocsCount lt 1}" icon="fa fa-times-circle-o"
action="#{curSearch.clearSelectedSearchResults()}" update="@(.resultlistActionGrid) @(.searchResultTable)"
oncomplete="PF('hitlistTableVar').unselectAllRows();" />
</p:contextMenu>
<!-- javascript to fix problem that the context menu hides if it is updated in ajax event contextMenu -->
<script type="text/javascript">
var currentEvent;
$(document).ready(function () {
PrimeFaces.widget.ContextMenu.prototype.show = function (e) {
// hide other contextmenus if any
$(document.body).children('.ui-contextmenu:visible').hide();
if (e) {
currentEvent = e;
}
var win = $(window),
left = e.pageX,
top = e.pageY,
width = this.jq.outerWidth(),
height = this.jq.outerHeight();
//collision detection for window boundaries
if ((left + width) > (win.width()) + win.scrollLeft()) {
left = left - width;
}
if ((top + height ) > (win.height() + win.scrollTop())) {
top = top - height;
}
if (this.cfg.beforeShow) {
this.cfg.beforeShow.call(this);
}
this.jq.css({
'left': left,
'top': top,
'z-index': ++PrimeFaces.zindex
}).show();
e.preventDefault();
};
});
</script>
dataTable需要为显示和更新的上下文菜单处理一些ajax事件：
<p:dataTable id="searchResultTableId" ...>
<p:ajax event="rowSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
<p:ajax event="rowUnselect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
<p:ajax event="toggleSelect" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
<p:ajax event="rowSelectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
<p:ajax event="rowUnselectCheckbox" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" />
<p:ajax event="contextMenu" update=":searchInstancesFormId:listResultTabViewId:searchResultTableContextMenuId" oncomplete="PF('searchResultTableContextMenuVar').show(currentEvent);" />
</p:dataTable>