jQuery EasyUI 给datagrid绑定右键菜单

以下为本人针对后台jquery easyui 页面优化问题解决办法，希望能给大家带来帮助

在下列表格中使用右键菜单

<table id="dg" class="easyui-datagrid"  data-options="onRowContextMenu: function (e, rowIndex, rowData) {     
 $('#mm').menu('show', { left: e.pageX, top: e.pageY }); e.preventDefault();
}
<tr>.....</tr>
 <tr>.....</tr>
 <tr>.....</tr>
 <tr>.....</tr>
</table> 

绿色部分则为绑定事件，针对于表格中的行右键时显示自定义菜单，e.preventDefault();则为屏蔽浏览器自带右键菜单。

下面为自定义菜单，放在body中的任意位置即可

<div id="mm" class="easyui-menu" style="width:100px;display: none">   
      <div iconCls="icon-shield" οnclick="revoke()">授权</div>   
      <div iconCls="icon-delete" οnclick="onDelete()">删除</div>   
      <div iconCls="icon-xiaoxi" οnclick="onAdds()">发送个人消息</div>
      <div>   
          <span>其它添加方式</span>   
          <div style="width:100px;">   
              <div iconCls="icon-commbook" οnclick="saveToGroup()">存通讯录</div>   
              <div iconCls="icon-qunzu" οnclick="deptImport()">导入</div>   
          </div>   
      </div>   
    </div>

右击表格数据行显示效果图如下：

右击其它部分显示右键菜单则显示如下：

以上为本人工作分享，使用者可以根据实际情况进行修改，注：转载请注明出处，http://blog.csdn.net/wh_forever