¿Cómo crear el menú contextual de jqGrid?

Intento crear un menú contextual en jqGrid (para cada fila) pero no puedo encontrar cómo hacerlo. Actualmente estoy usando el menú contextual de jQuery (¿hay alguna manera mejor?) Pero es para toda la Grid no para una fila particular, es decir, no puede realizar operaciones de nivel de fila para ello. Por favor, ayúdenme en esto, gracias.

$(document).ready(function(){ $("#list1").jqGrid({ sortable: true, datatype: "local", height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:50, sortable:false} ], multiselect: true, rowNum:10, rowList:[10,20,30], pager: '#pager1', sortname: 'id', recordpos: 'left', viewrecords: true, sortorder: "desc", caption: "Manipulating Array Data" }); $("#list1").jqGrid('navGrid','#pager1',{add:false,del:false,edit:false,position:'right'}); $("#list1").contextMenu({ menu: "myMenu" }, function(action, el, pos) { alert( "Action: " + action + "\n\n" + "Element ID: " + $(el).attr("id") + "\n\n" + "X: " + pos.x + " Y: " + pos.y + " (relative to element)\n\n" + "X: " + pos.docX + " Y: " + pos.docY+ " (relative to document)" ); }); 

Hay muchos complementos de menú de contexto. Uno de allí lo encontrará en el subdirectorio de plugins de la fuente jqGrid.

Para usarlo, puede, por ejemplo, definir su menú contextual con, por ejemplo, el siguiente marcado HTML:

  

Puede vincular el menú contextual a las filas de la grilla dentro de loadComplete (después de colocar las filas en la

):

 loadComplete: function() { $("tr.jqgrow", this).contextMenu('myMenu1', { bindings: { 'edit': function(trigger) { // trigger is the DOM element ("tr.jqgrow") which are triggered grid.editGridRow(trigger.id, editSettings); }, 'add': function(/*trigger*/) { grid.editGridRow("new", addSettings); }, 'del': function(trigger) { if ($('#del').hasClass('ui-state-disabled') === false) { // disabled item can do be choosed grid.delGridRow(trigger.id, delSettings); } } }, onContextMenu: function(event/*, menu*/) { var rowId = $(event.target).closest("tr.jqgrow").attr("id"); //grid.setSelection(rowId); // disable menu for rows with even rowids $('#del').attr("disabled",Number(rowId)%2 === 0); if (Number(rowId)%2 === 0) { $('#del').attr("disabled","disabled").addClass('ui-state-disabled'); } else { $('#del').removeAttr("disabled").removeClass('ui-state-disabled'); } return true; } }); } 

En el ejemplo, desactivé el elemento del menú "Del" para todas las filas que tenían incluso rowid. Los elementos del menú deshabilitados reenvían la selección del elemento, por lo que es necesario controlar si el elemento se deshabilitó una vez más dentro de los bindings .

$("tr.jqgrow", this).contextMenu('myMenu1', {...}); arriba $("tr.jqgrow", this).contextMenu('myMenu1', {...}); para unir el mismo menú a todas las filas de la grilla. Por supuesto, puede vincular diferentes filas a los diferentes menús: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...}); $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});

No leí el código de contextMenu cuidado y, probablemente, el ejemplo anterior no es el mejor, pero funciona muy bien. Puede ver la demostración correspondiente aquí . La demostración tiene muchas otras características, pero solo debe mirar en el controlador de eventos loadComplete .

Puede echar un vistazo al evento onRightClickRow

JqGridWiki

 jQuery("#gridid").jqGrid({ ... onRightClickRow: function(rowid, iRow, iCol, e){ //Show context menu ... }, ... }) 

De Wiki … onRightClickRow

Nombre del evento

onRightClickRow

Parámetros

rowid, iRow, iCol, e

Información

Criado inmediatamente después de hacer clic derecho en la fila. rowid es la identificación de la fila, iRow es el índice de la fila (no mezcle esto con rowid), iCol es el índice de la celda. e es el objeto del evento. Nota: este evento no funciona en los navegadores Opera, ya que Opera no admite el evento oncontextmenu

Puedes intentar esto:

 jQuery("#yourid").jqGrid({ 

 {name:'req_name',index:'req_name', width:'9%', sortable:true}, 

…..

  loadComplete:function(request){ 

  $("[aria-describedby='yourid_req_name']", this).contextMenu('myMenu1',{ onContextMenu: function(e) { var rowId = $(e.target).closest("tr.jqgrow").attr("id"); $("#send").html('Send Email'); return true; } }); }, 

……….. y el código html: