如何从顶级工具栏构建jqgrid上下文菜单

JQgrid中的上下文菜单项的自定义值包含有关向jqgrid添加上下文菜单的很好示例。 如果动态禁用编辑，删除，添加操作，则将上下文菜单与工具栏同步需要额外编码。

如何从jqgrid顶级工具栏自动创建上下文菜单，以便不需要额外的编码？ 上下文菜单应包含工具栏按钮图标和按钮标题成为菜单项标题。 选择菜单触发工具栏按钮单击事件。

或者，如果这不可能，如何将上下文菜单项与工具栏同步？ 例如，如果navtoolbar调用del：false，则上下文菜单中的删除命令不应出现或显示为禁用。

Answer 1

我的新演示演示了如何执行此操作：

在演示中，我使用了jqGrid的plugins目录中包含的jquery.contextmenu.js的小修改 。 我的代码非常完美，特别是在使用CSS类和获取contextMenu menuStyle和itemHoverStyle中使用的颜色时。 然而，代码确实需要我们。

演示的主要部分来自createContexMenuFromNavigatorButtons函数，该函数可以在构建导航器栏之后navGrid （在navGrid和navButtonAdd ）。 用法很简单：

 createContexMenuFromNavigatorButtons($("#list"), '#pager'); 

createContexMenuFromNavigatorButtons的代码如下：

 function createContexMenuFromNavigatorButtons(grid, pager) { var buttons = $('table.navtable .ui-pg-button', pager), myBinding = {}, menuId = 'menu_' + grid[0].id, menuDiv = $('
').attr('id', menuId).hide(), menuUl = $('
'); menuUl.appendTo(menuDiv); buttons.each(function () { var $div = $(this).children('div.ui-pg-div:first'), $spanIcon, text, $td, id, $li, gridId = grid[0].id; if ($div.length === 1) { text = $div.text(); $td = $div.parent(); if (text === '') { text = $td.attr('title'); } if (this.id !== '' && text !== '') { id = 'menuitem_' + this.id; if (id.length > gridId.length + 2) { id = id.substr(0, id.length - gridId.length - 1); } } else { // for custom buttons id = $.jgrid.randId(); } $li = $('
').attr('id', id); $spanIcon = $div.children('span.ui-icon'); $li.append($spanIcon.clone().css("float", "left")); $li.append($('').css({ 'font-size': '11px', 'font-family': 'Verdana', 'margin-left': '0.5em' }).text(text)); menuUl.append($li); myBinding[id] = (function ($button) { return function () { $button.click(); }; }($div)); } }); menuDiv.appendTo('body'); grid.contextMenu(menuId, { bindings: myBinding, onContextMenu: function (e) { var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i, lastSelId; if (rowId) { i = $.inArray(rowId, p.selarrrow); if (p.selrow !== rowId && i < 0) { // prevent the row from be unselected // the implementation is for "multiselect:false" which we use, // but one can easy modify the code for "multiselect:true" grid.jqGrid('setSelection', rowId); } else if (p.multiselect) { // Edit will edit FIRST selected row. // rowId is allready selected, but can be not the last selected. // Se we swap rowId with the first element of the array p.selarrrow lastSelId = p.selarrrow[p.selarrrow.length - 1]; if (i !== p.selarrrow.length - 1) { p.selarrrow[p.selarrrow.length - 1] = rowId; p.selarrrow[i] = lastSelId; p.selrow = rowId; } } return true; } else { return false; // no contex menu } }, menuStyle: { backgroundColor: '#fcfdfd', border: '1px solid #a6c9e2', maxWidth: '600px', width: '100%' }, itemHoverStyle: { border: '1px solid #79b7e7', color: '#1d5987', backgroundColor: '#d0e5f5' } }); }