JqGrid学习总结_8 右键菜单
http://blog.sina.com.cn/s/blog_c16346d00101ewwx.html
1、jqGrid有自带的右键菜单，下面是怎样创建右键菜单
2、首先在自己的JSP文件中引入 jquery_contextmenu.js文件
<script src=”<%=contextpath%>/jquery.contextmenu.js”></script>(引入JS文件路径)
3、JSP文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Html代码 <div class="contextMenu" id="myMenu1"> <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> lt;/div> |
4、JS文件
在jqGrid的LoadComplete方法中加入右键菜单
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
Js代码 loadComplete: function() { $("tr.jqgrow", this).contextMenu('myMenu1', { bindings: { //右键菜单绑定的事件 “edit”: function(trigger) { //点击edit时触发事件，需要处理的需求 // grid.editGridRow(trigger.id, editSettings); }, “add”: function(trigger) { //点击add时触发事件，需要处理的需求 // grid.editGridRow("new", addSettings); }, “del”: function(trigger) { //点击del时触发事件，需要处理的需求 // if ($('#del').hasClass('ui-state-disabled') === false){} } }, //重写onContextMenu和onShowMenu事件 onContextMenu: function(e) {//显示菜单 var rowId = $(e.target).closest("tr.jqgrow").attr("id");//获得RowID if( $(e.target).attr("id")=="dontShow")return false; else return true; }, onShowMenu: function(e,menu) {//显示菜单 return menu; }, menuStyle: { //菜单样式 backgroundColor: '#fcfdfd', border: '1px solid #a6c9e2', maxWidth: '600px', // to be sure width: '100%' // to have good width of the menu }, itemHoverStyle: { //点击菜单上面的样式 border: '1px solid #79b7e7', color: '#1d5987', backgroundColor: '#d0e5f5' } |
