jqgrid 右键菜单实现

来源：互联网发布：sqlserver 时间默认值编辑：程序博客网时间：2024/05/04 12:24

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.右键功能实现

0 0