版权声明:《==study hard and make progress every day==》 https://blog.csdn.net/qq_38225558/article/details/84470556
先看效果图吧:
html:
<%--这是一个隐藏的右击增删改菜单哦 写在body中即可 data-method里面是你自己调用方法实现增删改的功能哦--%>
<div id="menu_CRUD" class="easyui-menu" style="width: 30px; display: none;">
<div data-method="add" data-options="iconCls:'icon-add'">新增</div>
<div data-method="edit" data-options="iconCls:'icon-edit'">修改</div>
<div data-method="delete" data-options="iconCls:'icon-remove'" onclick="">删除</div>
</div>
js: -->注意: 我table中取得id名为dataGrid
//DataGrid右键菜单代码:这部分代码写在页面结构加载的里面即可哦
$(function () {
...
$('#dataGrid').datagrid({
/**
* 右键时触发事件
* @param e:功能很多哦
* @param rowIndex:点击时当前所在行的索引
* @param rowData:点击时当前行的数据
*/
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault(); //阻止浏览器捕获右键事件
$(this).datagrid("clearSelections"); //取消所有选中项
$(this).datagrid("selectRow", rowIndex); //根据索引选中当前行
$('#menu_CRUD').menu('show', {
//在鼠标点击处显示增删改菜单
left: e.pageX,
top: e.pageY
});
e.preventDefault(); //阻止浏览器自带的右键菜单弹出
}
});
})