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

发布于2020-01-27 19:16:19  分类:前端   阅读( 49 ) 

我们的需求是,在生成的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如下,可自由修改:

<!--鼠标右键菜单开始-->
<style>
.contextmenu {
display: none;
position: absolute;
width: 150px;
background: #FFFFFF;
border-radius: 5px;
overflow: hidden;
z-index: 99;
}
.contextmenu li {
border-left: 3px solid transparent;
transition: ease 0.3s;
}
.contextmenu li:hover {
background: #CE93D8;
border-left: 3px solid #9C27B0;
}
.contextmenu li a {
display: block;
padding: 10px;
color: #000000;
text-decoration: none;
transition: ease 0.3s;
}
.contextmenu li:hover a {
color: #FF0000;
}
</style>
<div>
<ul class="contextmenu">
<li>
<a id="cksj" href="javascript:void(0);">查看数据</a>
</li>
<li>
<a id="scsj" href="javascript:void(0);">删除数据</a>
</li>
</ul>
</div>
<!--鼠标右键菜单结束-->

如何判断是右键呢?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();
});
});

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

最后更新于:2020-01-27 19:16:19


上一篇: 重构PHP通用查询系统之3——jquery datatable表格如何双击修改?

下一篇: 重构PHP通用查询系统之5——PDO操作MYSQL数据库的常用方法


  • 最新评论(共0条)
需要登录才能发表评论

加入组织

  • QQ
  • 1. 手Q扫左侧二维码

    2. 搜Q群:617719749

    3. 点击加入学习群

最新评论