方法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
分享到:
相关推荐
在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作。grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒。 先上效果图,是...
JQuery右键菜单,jQuery contextMenu。官网资源,完整版。
基于jqgrid实现类似父子级树形菜单分页列表查询,让table页的行元素可以实现像ztree那样的上下级关系
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
JQuery Mobile 中实现 jqGrid 数据分组的一个小例子 程序请放在WEB服务器上运行
NULL 博文链接:https://474904099.iteye.com/blog/1846666
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid实现类似Excel录入功能
table表格样式利用jqgrid实现
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
利用jqGrid实现类似Excel录入功能
jqGrid在Net下的完美实现详解
jqgrid
完美实现jqgrid合并单元格,可实现合并行、合并列,具体使用方法有注释说明。
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
采用Struts2+Spring实现JqGrid
jqgrid 表格的增删改查4种操作,以及表格分页,还有修改以及添加时候的modal弹出框。代码是个project项目文件,需要自己建个解决方案将项目包含进去。