Ztree添加鼠标右键事件并显示菜单

奈何公司前端人员请假,只有我来了。


需求

右击树节点,出现如下图所示的效果。

""


代码

1、在setting 配置里面,给callback设置,右击事件onRightClick,并写一个onRightClick的js函数。

1
2
3
callback: {
onRightClick: onRightClick
}

右键事件函数:

1
2
3
function onRightClick(event, treeId, treeNode) {

}

2、因为浏览器有右击的默认事件,所以要禁用默认鼠标右击事件

1
2
3
document.oncontextmenu = function(){
return false;
};

以上步骤,组成右击事件以下代码:

1
2
3
4
5
6
7
8
9
10
11
// 右击事件
function onRightClick(event, treeId, treeNode) {
document.oncontextmenu = function(){
return false;
};
//alert(1)
if (treeNode.type == 0) {
return;
}
showRMenu("node", event.clientX, event.clientY);
}

众所周知,在PC端,我们通常用event.clienX或者event.clientY来获取手指的坐标。

3、触发事件之后,出现提示框
HTML代码

1
2
3
4
5
6
7
<div id="rMenu">
<a href="javascript:void(0);" class="list-group-item aMenu" >折 叠</a><br>
<a href="javascript:void(0);" class="list-group-item aMenu" >刷 新</a><br>
<a href="javascript:void(0);" class="list-group-item aMenu" >添 加</a><br>
<a href="javascript:void(0);" class="list-group-item aMenu" >上 传</a><br>
<a href="javascript:void(0);" class="list-group-item aMenu" >属 性</a><br>
</div>

CSS代码

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #e5ebff; text-align: left;padding: 3px;}
div#rMenu a{
cursor: pointer;
list-style: none outside none;
}
.aMenu {
ont-size: medium;font-weight: bold;
}
</style>
  • 这段css样式主要让div隐藏起来

Js代码

1
2
3
4
5
6
7
8
9
10
11
12
//显示右键菜单
function showRMenu(type, x, y) {
$("#rMenu").show();
$("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
$("body").bind("mousedown", onBodyMouseDown);
}
//鼠标按下事件
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
$("#rMenu").css({"visibility" : "hidden"});
}
}
  • 设置菜单显示的位置,鼠标单击后菜单消失

End

css样式可能不是太好看,大家自己调吧,毕竟我不是前端。。