¿Cómo puedo configurar un contextMenu para mi jqGrid?

Tengo un jqGrid para uso interno en nuestro sitio que enumera a todos nuestros usuarios. En cada usuario / fila, me gustaría poder aplicar varias opciones (dependiendo de los datos en esa fila). En lugar de agregar botones de navegación al buscapersonas, tendría más sentido tener un menú contextual que aparezca al hacer clic con el botón derecho de una fila.

Actualmente tenemos este complemento de jQuery contextMenu importado en nuestro sitio, por lo que sería preferible integrarlo de alguna manera en mi jqGrid.

Mi jqGrid reducido a lo básico se ve algo como esto:

$("#users").jqGrid({ datatype: 'json', url: 'myMethodURL', gridview: true, colModel: [ {name: 'id', label: 'User ID', hidden:true}, {name: 'lastname', label: 'Last Name'}, {name: 'firstname', label: 'First Name'}, {name: 'status', label: 'Status', stype: 'select', searchoptions: {value: ':All;ACTIVE:Active;INACTIVATED:Inactive;PENDING APPROVAL:Pending Approval;'}}, ... more fields ... ], height:'auto', autowidth:true, caption:'Users', rowNum:20, rowList:[10,20,50], sortorder:'asc', sortname: 'lastname', ignoreCase: true, // case-insensitive filtering pager: '#pager', jsonReader: { root: "ROWS", //our data page: "PAGE", //current page total: "TOTAL", //total pages records:"RECORDS", //total records cell: "", //not used id: "0" //will default first column as ID }, postData: postData }); $("#users").jqGrid("filterToolbar", {searchOnEnter: true}); 

Algunas de las opciones que necesito en el menú contextual:

  1. Activar O Inactivar (dependiendo de si el usuario está actualmente activo / inactivo – básicamente necesita un interruptor)
  2. Procesar al usuario pendiente (SOLO debe aparecer si el estado del usuario es “pendiente”)
  3. Editar información del usuario
  4. Enviar enlace de restablecer contraseña

¿Cómo puedo configurar un menú contextual con opciones de variables (dependiendo de los valores de esa fila en particular), y definir qué sucede cuando se hace clic en una opción?

En general, el uso del complemento jQuery contextMenu con jqGrid me parece muy simple. Simplemente puede enlazar el menú al cuerpo de la cuadrícula. Solo hay que saber que el rowid es el valor del atributo id del elemento

y los elementos tr que tienen datos reales tienen la clase .jqgrow .

Así el código podría ser como abajo.

 $("#users").jqGrid({ datatype: 'json', ... }).contextMenu({ selector: ".jqgrow", build: function ($trigger, e) { // this callback is executed every time the menu is to be shown // its results are destroyed every time the menu is hidden // e is the original contextmenu event var $tr = $(e.target).closest("tr.jqgrow"), rowid = $tr.attr("id"), item = $grid.jqGrid("getRowData", rowid); // item contains now the data of the row and we can // build the context menu dynamically if (item.status === "ACTIVE") { return { callback: function (key, options) { var m = "clicked: " + key + " on rowid=" + rowid + " (" + item.firstname + " " + item.lastname + ")"; alert(m); }, items: { edit: {name: "Edit", icon: "edit"}, cut: {name: "Cut", icon: "cut"}, copy: {name: "Copy", icon: "copy"}, paste: {name: "Paste", icon: "paste"}, delete: {name: "Delete", icon: "delete"}, sep1: "---------", quit: {name: "Quit", icon: function($element, key, item) { return 'context-menu-icon context-menu-icon-quit'; }} } }; } else { return { callback: function (key, options) { var m = "clicked: " + key + " on rowid=" + rowid + " (" + item.firstname + " " + item.lastname + ")"; alert(m); }, items: { delete: {name: "Delete", icon: "delete"}, sep1: "---------", quit: {name: "Quit", icon: function($element, key, item) { return 'context-menu-icon context-menu-icon-quit'; }} } }; } } }); 

Vea la demostración https://jsfiddle.net/OlegKi/37rb593h/ . Puede modificar el código de build callback a cualquiera de sus requisitos.