重构PHP通用查询系统之4----html表格如何自定义右键菜单，实现编辑删除等功能？

我们的需求是，在生成的html表格中，右键任一行，弹出自定义的右键菜单，用户点击菜单相应选项，实现相应的功能。

实现的原理：先屏蔽表格DIV内的系统右键菜单

//阻止浏览器默认右键点击事件
$("#bgnr").bind("contextmenu", function(){
return false;
});

然后使用jquery捕捉鼠标按键动作，按下右键时，读取这一行的数据：

//右键按下时
$("#bgnr").mousedown(function(e) {
//获取行数据
var row = $(e.target).closest('tr');
var bm = row.children('td').eq(2).text();//表名
var id = row.children('td').eq(1).text();//id

这时，需要计算鼠标的位置，并给菜单设置相应的css等。

// 获取窗口尺寸
var winWidth = $(document).width();
var winHeight = $(document).height();
// 鼠标点击位置坐标
var mouseX = e.pageX;
var mouseY = e.pageY;
// ul标签的宽高
var menuWidth = $(".contextmenu").width();
var menuHeight = $(".contextmenu").height();
// 最小边缘margin(具体窗口边缘最小的距离)
var minEdgeMargin = 10;
// 以下判断用于检测ul标签出现的地方是否超出窗口范围
if(mouseX + menuWidth + minEdgeMargin >= winWidth && mouseY + menuHeight + minEdgeMargin >= winHeight) {
// 第一种情况：右下角超出窗口
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {
// 第二种情况：右边超出窗口
menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
}else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {
// 第三种情况：下边超出窗口
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY - menuHeight - minEdgeMargin + "px";
}else {
// 其他情况：未超出窗口
menuLeft = mouseX + minEdgeMargin + "px";
menuTop = mouseY + minEdgeMargin + "px";
}

菜单html和相应css如下，可自由修改：

查看数据


删除数据

如何判断是右键呢？e.which == 3就是右键，这时可以给菜单添加链接，或者执行相应操作。不过，在这里遇到一个问题：如果用户多次点击右键，再点击菜单中选择，会出现执行重复动作的情况。原因是，右键点击时，给菜单绑定了一次事件，再点击又绑定了一次，导致多次重复绑定。最明显的是，如果alert弹窗，右键点了几次就会弹出几次。

解决办法其实很简单，只是网络上信息太多错误的。使用jQuery解除绑定事件即可，我们先复习一下：

off方法：1. 不带参数，解绑元素上所有的方法；2. 带一个参数，解绑这类型的方法；3. 带二个参数，解绑这类型指定的方法。比如：

$('button').off();/解除button上的所有绑定事件
$('button').off('click'); //解除button上的所有click事件

因此，我们只需要在单击事件之前，先解绑该事件即可：

$("#scsj").off();//注销事件,防止重复绑定导致多次点击

详细代码如下：

if (e.which == 3) {//右键为3
$('#cksj').attr('href','/admin/cksjb?bm=' + bm);//修改右键菜单查看数据herf以跳转查看
$(".contextmenu").css({//显示菜单
"left": menuLeft,
"top": menuTop
}).show();
$("#scsj").off();//注销事件,防止重复绑定导致多次点击
//删除数据被点击scsj
$("#scsj").one("click",function(){
if(confirm("确定要删除吗？")){
//ajax传递到后台更新数据库
$.ajax({
url:'/admin/deletebm',
data:{'bm':bm,'id':id},
type:'POST',
dataType:'json',
success:function(data){
console.dir(data)
if(data == 0  || data == 1){
jQuery.alertWindow("删除成功");
}else{
jQuery.alertWindow("删除失败");
}
history.go(0);//刷新页面
}
});
}
});
}
// 点击之后，右键菜单隐藏
$(document).click(function() {
$(".contextmenu").hide();
});
});

这样就实现了自定义右键菜单的功能。