JqGrid学习总结_8 右键菜单

[url]http://blog.sina.com.cn/s/blog_c16346d00101ewwx.html[/url]

1、jqGrid有自带的右键菜单，下面是怎样创建右键菜单

2、首先在自己的JSP文件中引入 jquery_contextmenu.js文件
<script src="<%=contextpath%>/jquery.contextmenu.js"></script>(引入JS文件路径)

3、JSP文件

  <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>
</div>

4、JS文件
在jqGrid的LoadComplete方法中加入右键菜单

   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'
          }
}