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" onclick="revoke()">授权</div>
<div iconCls="icon-delete" onclick="onDelete()">删除</div>
<div iconCls="icon-xiaoxi" onclick="onAdds()">发送个人消息</div>
<div>
<span>其它添加方式</span>
<div style="width:100px;">
<div iconCls="icon-commbook" onclick="saveToGroup()">存通讯录</div>
<div iconCls="icon-qunzu" onclick="deptImport()">导入</div>
</div>
</div>
</div>

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

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

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