jQuery EasyUI 给datagrid绑定右键菜单

最新推荐文章于 2023-02-24 08:22:39 发布

iteye_20131

最新推荐文章于 2023-02-24 08:22:39 发布

阅读量229

点赞数

文章标签： javascript ViewUI

本文介绍了一种在EasyUI的Datagrid组件中实现自定义右键菜单的方法，并提供了具体的代码示例。通过绑定事件，当用户在表格行上点击鼠标右键时，将弹出自定义的菜单选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为本人针对后台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