JqGrid学习总结_8 右键菜单

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

2、首先在自己的JSP文件中引入jquery_contextmenu.js文件

  <script src="<%=contextpath%>/jquery.contextmenu.js"></script>(引入JS文件路径)

3、JSP文件

  <divclass="contextMenu"id="myMenu1"> 

   <ulstyle="width:200px">

   <liid="add"> 

     <span class="ui-iconui-icon-plus" style="float:left"></span>//添加图片

     <span style="font-size:11px;font-family:Verdana">AddRow</span> 

   </li> 

   <liid="edit">

    <spanclass="ui-iconui-icon-pencil" style="float:left"></span>//添加图片

    <span style="font-size:11px;font-family:Verdana">EditRow</span>

  </li>

  <li id="del"> 

    <span class="ui-iconui-icon-trash" style="float:left"></span>//添加图片

    <spanstyle="font-size:11px;font-family:Verdana">DeleteRow</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")returnfalse;

         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'

         }

}