cómo construir el menú contextual jqgrid desde la barra de herramientas de nivel superior

Los valores personalizados para los elementos del menú contextual en JQgrid contienen una gran muestra sobre cómo agregar el menú contextual a jqgrid. Si las operaciones de edición, eliminación y adición se desactivan dinámicamente, la sincronización del menú contextual con la barra de herramientas requiere encoding adicional.

¿Cómo crear un menú contextual automáticamente desde la barra de herramientas de nivel superior de jqgrid para que no se requiera encoding adicional? El menú contextual debe contener los icons de los botones de la barra de herramientas y los títulos de los botones se convierten en títulos de elementos del menú. El menú de selección activa el evento de clic en el botón de la barra de herramientas.

O si esto no es posible, ¿cómo sincronizar los elementos del menú contextual con la barra de herramientas? Ejemplo de Fox, si la llamada navtoolbar tiene del: false, el comando Eliminar en el menú contextual no debería aparecer o debe estar deshabilitado.

Mi nueva demostración muestra cómo hacer esto:

introduzca la descripción de la imagen aquí

En la demostración, uso una pequeña modificación de jquery.contextmenu.js incluida en el directorio de complementos de jqGrid. Mi código está lejos de ser perfecto, especialmente en el uso de clases CSS y en el uso de colores en menuStyle y itemHoverStyle del contextMenu . Sin embargo el código quiere que necesitamos.

La parte principal de la demostración consiste en la función createContexMenuFromNavigatorButtons , que se puede llamar después de que se construye la barra de navegación (después de navGrid y navButtonAdd ) El uso es muy simple:

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

El código de createContexMenuFromNavigatorButtons se encuentra a continuación:

 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' } }); }