Bootstrap风格的zTree右键菜单

HTML：<%--右键菜单--%><divid="zTreeRightMenuContainer"style="z-index:9999;"><%--层级0--%><ul

HTML：

<%-- 右键菜单 --%>
<div id="zTreeRightMenuContainer" style="z-index: 9999;">
 <%-- 层级 0 --%>
 <ul class="dropdown-menu" role="menu" level="0">
　　　　<%-- 通过给菜单项添加样式“hasChildren”并在li标签下添加菜单结构即可扩展子级菜单 --%>
 <li class="hasChildren"><a tabindex="-1" action="refreshzTreeObj">刷新</a>
 <ul class="dropdown-menu" role="menu" level="1">
 <li><a tabindex="-1">将数据库复制到不同的主机/数据库</a></li>
 <li><a tabindex="-1">创建数据库</a></li>
 <li><a tabindex="-1">改变数据库</a></li>
 <li><a tabindex="-1">新数据搜索</a></li>
 <li><a tabindex="-1">创/建</a></li>
 <li><a tabindex="-1">更多数据库操作</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1">备份/导出</a></li>
 <li><a tabindex="-1">导入</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1">在创建数据库架构HTML</a></li>
 </ul>
 </li>
 </ul>
 <%-- 层级 1 --%>
 <ul class="dropdown-menu" role="menu" level="1">
 <li><a tabindex="-1">将数据库复制到不同的主机/数据库</a></li>
 <li><a tabindex="-1">创建数据库</a></li>
 <li><a tabindex="-1">改变数据库</a></li>
 <li><a tabindex="-1">新数据搜索</a></li>
 <li><a tabindex="-1">创/建</a></li>
 <li><a tabindex="-1">更多数据库操作</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1">备份/导出</a></li>
 <li><a tabindex="-1">导入</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1">在创建数据库架构HTML</a></li>
 </ul>
 <%-- 层级 2 --%>
 <ul class="dropdown-menu" role="menu" level="2">
 <li><a tabindex="-1">创建表</a></li>
 <li><a tabindex="-1">将表复制到不同的主机/数据库</a></li>
 <li><a tabindex="-1">数据搜索</a></li>
 <li class="divider"></li>
 <li><a tabindex="-1">计划备份</a></li>
 <li><a tabindex="-1">备份表作为SQL转储</a></li>
 </ul>
</div>

CSS：

/* 右键菜单 - start */
 .dropdown-menu .dropdown-menu {
 position: absolute;
 top: -9px;
 left: 100%;
 }
 .dropdown-menu li {
 position: relative;
 }
 .dropdown-menu li.hasChildren:before {
 content: '';
 position: absolute;
 top: 50%;
 right: 8px;
 width: 0;
 height: 0;
 margin-top: -5px;
 border-style: solid;
 border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
 border-width: 5px 0 5px 5px;
 pointer-events: none;
 }
 .dropdown-menu li.hasChildren:hover > .dropdown-menu {
 display: block;
 }
 /* 右键菜单 - end */

JS：

/* 以下为右键菜单插件（Bootstrap风格） */
;(function ($) {
 'use strict';
 /* CONTEXTMENU CLASS DEFINITION
 * ============================ */
 var toggle = '[data-toggle="context"]';
 var ContextMenu = function (element, options) {
 this.$element = $(element);
 this.before = options.before || this.before;
 this.onItem = options.onItem || this.onItem;
 this.scopes = options.scopes || null;
 if (options.target) {
 this.$element.data('target', options.target);
 }
 this.listen();
 };
 ContextMenu.prototype = {
 constructor: ContextMenu
 , show: function (e) {
 var $menu
 , evt
 , tp
 , items
 , relatedTarget = {relatedTarget: this, target: e.currentTarget};
 if (this.isDisabled()) return;
 this.closemenu();
 if (this.before.call(this, e, $(e.currentTarget)) === false) return;
 $menu = this.getMenu();
 $menu.trigger(evt = $.Event('show.bs.context', relatedTarget));
 tp = this.getPosition(e, $menu);
 items = 'li:not(.divider)';
 $menu.attr('style', '')
 .css(tp)
 .addClass('open')
 .on('click.context.data-api', items, $.proxy(this.onItem, this, $(e.currentTarget)))
 .trigger('shown.bs.context', relatedTarget);
 // Delegating the `closemenu` only on the currently opened menu.
 // This prevents other opened menus from closing.
 $('html')
 .on('click.context.data-api', $menu.selector, $.proxy(this.closemenu, this));
 return false;
 }
 , closemenu: function (e) {
 var $menu
 , evt
 , items
 , relatedTarget;
 $menu = this.getMenu();
 if (!$menu.hasClass('open')) return;
 relatedTarget = {relatedTarget: this};
 $menu.trigger(evt = $.Event('hide.bs.context', relatedTarget));
 items = 'li:not(.divider)';
 $menu.removeClass('open')
 .off('click.context.data-api', items)
 .trigger('hidden.bs.context', relatedTarget);
 $('html')
 .off('click.context.data-api', $menu.selector);
 // Don't propagate click event so other currently
 // opened menus won't close.
 if (e) {
 e.stopPropagation();
 }
 }
 , keydown: function (e) {
 if (e.which == 27) this.closemenu(e);
 }
 , before: function (e) {
 return true;
 }
 , onItem: function (e) {
 return true;
 }
 , listen: function () {
 this.$element.on('contextmenu.context.data-api', this.scopes, $.proxy(this.show, this));
 $('html').on('click.context.data-api', $.proxy(this.closemenu, this));
 $('html').on('keydown.context.data-api', $.proxy(this.keydown, this));
 }
 , destroy: function () {
 this.$element.off('.context.data-api').removeData('context');
 $('html').off('.context.data-api');
 }
 , isDisabled: function () {
 return this.$element.hasClass('disabled') ||
 this.$element.attr('disabled');
 }
 , getMenu: function () {
 var selector = this.$element.data('target')
 , $menu;
 if (!selector) {
 selector = this.$element.attr('href');
 selector = selector && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
 }
 $menu = $(selector);
 return $menu && $menu.length ? $menu : this.$element.find(selector);
 }
 , getPosition: function (e, $menu) {
 var mouseX = e.clientX
 , mouseY = e.clientY
 , boundsX = $(window).width()
 , boundsY = $(window).height()
 , menuWidth = $menu.find('.dropdown-menu').outerWidth()
 , menuHeight = $menu.find('.dropdown-menu').outerHeight()
 , tp = {"position": "absolute", "z-index": 9999}
 , Y, X, parentOffset;
 if (mouseY + menuHeight > 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, Y, 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 里面绑定当前节点的子节点）

function onExpandFun(event, treeId, treeNode) {
 /* 展开当前节点执行的代码.... *///绑定当前展开节点的子节点右击事件
 initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId 是当前展开节点的ID
}

以上所述是小编给大家介绍的Bootstrap风格的zTree右键菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

ztree bootstrap风格 ztree右键菜单