实现jqGrid右键菜单contextMenu

方法1、该版本是完整的例子，但我使用的是最新版本的jqGrid（jqGrid-4.5.4）和jQuery（1.9.1），按照他的做法没成功，估计版本问题。http://diqigan.iteye.com/blog/920904

方法2、我使用成功的示例：
show：
[img]http://dl2.iteye.com/upload/attachment/0091/8163/15306db6-ecbd-336a-b43d-5535003e3df5.jpg[/img]

jsp代码：
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:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="plug/jqgrid/themes/css/ui.jqgrid.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="plug/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="plug/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="plug/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 200px">
<li id="add">
<span class="ui-icon ui-icon-plus" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Add Row</span>
</li>
<li id="edit">
<span class="ui-icon ui-icon-pencil" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Edit Row</span>
</li>
<li id="del">
<span class="ui-icon ui-icon-trash" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Delete Row</span>
</li>
</ul>
</div>
You can bind the context menu to the grid rows inside of loadComplete (after the rows are placed in the <table>):
js代码：
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;
}
});
}
地址：http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditingWithContextmenu3.htm
http://stackoverflow.com/questions/6607576/how-to-create-jqgrid-context-menu