zTree右鍵菜單（Bootstrap風格）

HTML： CSS： JS：步驟： 1、引入zTree相關js、css文件（以我自己的項目為例：jquery.ztree.all-3.5.min.js，zTreeStyle.css）； 2、將上面給出的右鍵菜單插件另存為js文件引入頁面（以我自己的項目為例：bsContextmenu.js） 3、 ...

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