EasyUI(2) 页面右击实现增删改菜单功能

先看效果图吧:

EasyUI(2) 页面右击实现增删改菜单功能_第1张图片

html:

<%--这是一个隐藏的右击增删改菜单哦 写在body中即可 data-method里面是你自己调用方法实现增删改的功能哦--%>

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();  //阻止浏览器自带的右键菜单弹出
        }
    });
})

 

你可能感兴趣的:(-----❷,easyui)