I am trying to create a context menu on jqGrid (for each row) but can't find how to do so.I am currently using jQuery Context Menu (is there a better way? )but it is for the entire Grid not for a particular row i.e. cannot perform row level operations for it. Please help me in this, thanks.
$(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)" ); });
There are many context menu plugins. One from there you will find in the plugins subdirectory of the jqGrid source.
To use it you can for example define your context menu with for example the following HTML markup:
You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the ): 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; } }); }
In the example I disabled "Del" menu item for all rows having even rowid. The disabled menu items forward the item selection, so one needs to control whether the item disabled one more time inside of bindings.
I used above $("tr.jqgrow", this).contextMenu('myMenu1', {...}); to bind the same menu to all grid rows. You can of course bind different rows to the different menus: $("tr.jqgrow:even", this).contextMenu('myMenu1', {...}); $("tr.jqgrow:odd", this).contextMenu('myMenu2', {...});
I didn't read the code of contextMenu careful and probably the above example is not the best one, but it works very good. You can see the corresponding demo here. The demo has many other features, but you should take the look only in the loadComplete event handler.
回答2:
you can have a look at the onRightClickRow event
JqGridWiki
jQuery("#gridid").jqGrid({ ... onRightClickRow: function(rowid, iRow, iCol, e){ //Show context menu ... }, ... })
From Wiki ... onRightClickRow
Event Name
onRightClickRow
Parameters
rowid, iRow, iCol, e
Information
Raised immediately after row was right clicked. rowid is the id of the row, iRow is the index of the row (do not mix this with the rowid), iCol is the index of the cell. e is the event object. Note - this event does not work in Opera browsers, since Opera does not support oncontextmenu event
回答3:
You can try this :
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; } }); },
........... and the html code :
