HTML：
<%-- 层级 1 --%>
<%-- 层级 2 --%>
CSS：
.dropdown-menu {
display: block;
}
/* 右键菜单 - end */
JS：
boundsY) {
Y = {"top": mouseY - menuHeight + $(window).scrollTop()};
} else {
Y = {"top": mouseY + $(window).scrollTop()};
}
if ((mouseX + menuWidth > boundsX) && ((mouseX - menuWidth) > 0)) {
X = {"left": mouseX - menuWidth + $(window).scrollLeft()};
} else {
X = {"left": mouseX + $(window).scrollLeft()};
}
// If context-menu's parent is positioned using absolute or relative positioning,// the calculated mouse position will be incorrect.
// Adjust the position of the menu by its offset parent position.
parentOffset = $menu.offsetParent().offset();
X.left = X.left - parentOffset.left;
Y.top = Y.top - parentOffset.top;
return $.extend(tp,X);
}
};
/* CONTEXT MENU PLUGIN DEFINITION
* ========================== */
$.fn.contextmenu = function (option,e) {
return this.each(function () {
var $this = $(this),data = $this.data('context'),options = (typeof option == 'object') && option;
if (!data) $this.data('context',(data = new ContextMenu($this,options)));
if (typeof option == 'string') data[option].call(data,e);
});
};
$.fn.contextmenu.Constructor = ContextMenu;
/* APPLY TO STANDARD CONTEXT MENU ELEMENTS
* =================================== */
$(document)
.on('contextmenu.context.data-api',function () {
$(toggle).each(function () {
var data = $(this).data('context');
if (!data) return;
data.closemenu();
});
})
.on('contextmenu.context.data-api',toggle,function (e) {
$(this).contextmenu('show',e);
e.preventDefault();
e.stopPropagation();
});
}(jQuery));
方法是通过上面的js插件封装的方法 */
/*
parentNode（zTree容器 || 指定的节点）
*/
function initzTreeRightMenu(parentNode) {
//树形菜单右击事件
$('li,a',$(parentNode)).contextmenu({
target: '#zTreeRightMenuContainer',//此设置项是zTree的容器
before: function (e,element,target) {
//当前右击节点ID
var selectedId = element[0].tagName == 'LI' ? element.attr('id') : element.parent().attr('id');
//根据节点ID获取当前节点详细信息
curSelectNode = zTreeObj.getNodeByTId(selectedId);
//当前节点的层级
var level = curSelectNode.level;
level = 0;
//选中当前右击节点
zTreeObj.selectNode(curSelectNode);
//根据当前节点层级显示相应的菜单
$('#zTreeRightMenuContainer ul.dropdown-menu[level="' + level + '"]').removeClass('hide').siblings().addClass('hide');
},onItem: function (context,e) {
var action = $(e.target).attr('action');
this.closemenu();
if (action) {
zTreeRightMenuFuns[action]();
}
}
});
}
步骤：
1、引入zTree相关js、css文件（以我自己的项目为例：jquery.ztree.all-3.5.min.js，zTreeStyle.css）；
2、将上面给出的右键菜单插件另存为js文件引入页面（以我自己的项目为例：bsContextmenu.js）
3、在页面初始化zTree之后，调用上面的方法：initzTreeRightMenu('#schemaMgrTree'); // ‘#schemaMgrTree' 是我自己项目的zTree容器ID
备注：
1、假如zTree中有异步载入的节点（以我自己项目为例：zTree中有部分节点是展开了父节点之后才加载的，像这种情况则需要在 zTree 的 onExpandFun 里面绑定当前节点的子节点）
代码.... *///绑定当前展开节点的子节点右击事件
initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId 是当前展开节点的ID
}
以上所述是小编给大家介绍的Bootstrap风格的zTree右键菜单。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/bootstrap/41545.html