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