jqgrid 右键菜单实现

最新推荐文章于 2023-12-22 08:58:14 发布

技术新人牛

最新推荐文章于 2023-12-22 08:58:14 发布

阅读量2.4k

点赞数

分类专栏：前端技术文章标签： jqgrid 右键菜单

本文链接：https://blog.csdn.net/turleslove/article/details/49884789

版权

前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.需要引入jqgrid的js等，同时需要引入jquery.contextmenu.r2.js

2.再jq初始化的时候添加如下代码

loadComplete:function(){ 
			     $("tr.jqgrow",this).contextMenu('menu', {
			       bindings:{ //右键菜单绑定的事件
			         "add": function(trigger){         
			           //点击edit时触发事件，需要处理的需求   trigger.id为当前行中单元格设置成key：true的值 
			           alert(trigger.id);
			        // grid.editGridRow(trigger.id, editSettings);
			        },
			         "delete":function(trigger){ 
			            //点击add时触发事件，需要处理的需求    
			            // grid.editGridRow("new",addSettings);},
			       }, 
			         "save":function(trigger){ 
			            //点击del时触发事件，需要处理的需求   
			           // if ($('#del').hasClass('ui-state-disabled')=== false){} 
			         }, 
			         "About":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")
			        	returnfalse;
			         else return true;
			     },
			   onShowMenu: function(e,menu) {//显示菜单
			           return menu;
			      },
			    menuStyle:{ //菜单样式
			            backgroundColor:'#fcfdfd',
			            border:'1px solid #a6c9e2', 
			            maxWidth:'100px',// to be sure 
			            width:'100%' // to have good width of the menu 
			         }, 
			    itemHoverStyle:{ //点击菜单上面的样式
			          border:'1px solid #79b7e7',
			          color:'#1d5987', 
			          backgroundColor:'#d0e5f5'
			         }
			})
			},

3.再页面中添加如下代码

<div class="contextMenu" id="menu" style="display: none">
		<ul>
			<li id="pro"><img src="comm/css/images/configure.png" />指派</li>
			<li id="add"><img src="comm/css/images/add.png" />添加</li>
			<li id="edit"><img src="comm/css/images/edit.png" />编辑</li>
			<li id="save"><img src="comm/css/images/save.png" />保存</li>
			<li id="delete"><img src="comm/css/images/delete.png" />删除</li>
			<li id="open"><img src="comm/css/images/agt_action_success.png" />打开</li>
			<li id="close"><img src="comm/css/images/agt_action_fail.png" />关闭</li>
			<li id="search"><img src="comm/css/images/search.png" />查询</li>
		</ul>
	</div>

4.右键功能实现