方法1、该版本是完整的例子,但我使用的是最新版本的jqGrid(jqGrid-4.5.4)和jQuery(1.9.1),按照他的做法没成功,估计版本问题。http://diqigan.iteye.com/blog/920904
方法2、我使用成功的示例:
show:
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

- 大小: 89.6 KB
分享到:
相关推荐
《jQuery右键菜单contextMenu使用实例详解》 在网页交互设计中,右键菜单是一种常见的功能,用于提供快捷的操作选项。jQuery的contextMenu插件为我们提供了实现这一功能的强大工具。本文将详细介绍如何利用jQuery和...
**五、jqGrid右键菜单功能** `jqGrid`是一个强大的jQuery插件,用于展示和管理网格数据。它可以集成右键菜单功能,提供针对行或单元格的上下文操作。在`jqGrid`中实现右键菜单,通常需要扩展`jqGrid`的事件处理和...
5. **主题化和样式自定义**:默认的CSS样式可以满足基本需求,但你也可以根据自己的设计需求进行调整或覆盖,实现与网站风格一致的右键菜单。 6. **与其他jQuery插件兼容**:由于基于jQuery,这个插件可以方便地与...
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
jQuery.contextMenu插件允许开发人员自定义右键菜单,这在网页应用中非常常见。通过这个插件,你可以轻松创建具有不同选项和操作的上下文菜单,提高用户体验。它支持动态构建菜单项,可以根据用户的操作或选定元素...