easyui页面中右击实现增删改菜单功能

版权声明:《==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();  //阻止浏览器自带的右键菜单弹出
        }
    });
})

猜你喜欢

转载自blog.csdn.net/qq_38225558/article/details/84470556