[zTree]添加右键菜单

2024-04-27 14:15:11

字体：大中小

来源：转载

供稿：网友

[zTree]添加右键菜单

关键代码：

/// <reference path="zTree_v3-master/js/jquery-1.4.4.min.js" />/// <reference path="zTree_v3-master/js/jquery.zTree.all-3.5.js" />(function (window) {    yzTreeUtils = {        addMenu: function (zTreeId, menuId) {            /// <summary>            /// 增加右键菜单            /// </summary>            /// <param name="_zTreeId">_zTreeID</param>            /// <param name="menuId">右键菜单ID</param>            var _zTree = $.fn.zTree.getZTreeObj(zTreeId);            var _rMenu = $("#" + menuId);            if (_zTree && _rMenu) {                _rMenu.CSS({                    "position": "absolute",                    "visibility": "hidden",                    "top": 0,                    "background-color": "#555",                    "text-align": "left",                    "padding": "2px"                });                _rMenu.find('ul').css({                    "margin": "1px 0",                    "padding": "0 5px",                    "cursor": "pointer",                    "background-color": " #DFDFDF",                    "list-style": "none outside none"                });                _zTree.setting.callback.onRightClick = function (event, treeId, treeNode) {                    if (treeNode && !treeNode.noR) {                        _zTree.selectNode(treeNode);                        _rMenu.find('ul').show();                        var x = event.clientX, y = event.clientY;                        _rMenu.css({ "top": y + "px", "left": x + "px", "visibility": "visible" });                    }                }                $("body").bind("mousedown", function (event) {                    if (!(event.target.id == menuId || $(event.target).parents("#" + menuId).length > 0)) {                        _rMenu.css({ "visibility": "hidden" });                    }                });            }        }    }    window.yzTreeUtils = yzTreeUtils;})(window);

示例：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <link href="ztree_v3-master/css/ztreestyle/ztreestyle.css" rel="stylesheet" />    <link href="ztree_v3-master/css/demo.css" rel="stylesheet" />    <script src="ztree_v3-master/js/jquery-1.4.4.min.js"></script>    <script src="ztree_v3-master/js/jquery.ztree.core-3.5.js"></script>    <script src="yzTreeUtils.js"></script>    <script>        var setting = {            view: {                dblClickExpand: false            },            check: {                enable: true            }        };        var zNodes = [        {            id: 1, name: "无右键菜单 1", open: true, noR: true,            children: [                   { id: 11, name: "节点 1-1", noR: true },                   { id: 12, name: "节点 1-2", noR: true }            ]        },        {            id: 2, name: "右键操作 2", open: true,            children: [                   { id: 21, name: "节点 2-1" },                   { id: 22, name: "节点 2-2" },                   { id: 23, name: "节点 2-3" },                   { id: 24, name: "节点 2-4" }            ]        },        {            id: 3, name: "右键操作 3", open: true,            children: [                   { id: 31, name: "节点 3-1" },                   { id: 32, name: "节点 3-2" },                   { id: 33, name: "节点 3-3" },                   { id: 34, name: "节点 3-4" }            ]        }        ];        $(document).ready(function () {            $.fn.zTree.init($("#treeDemo"), setting, zNodes);        });        function addMenu() {            yzTreeUtils.addMenu('treeDemo', 'rMenu');        }    </script>    <title></title></head><body>    <div class="content_wrap">        <div class="zTreeDemoBackground left">            <ul id="treeDemo" class="ztree"></ul>        </div>    </div>    <br />    <input id="Button1" type="button" value="addMenu" onclick="addMenu()" />    <div id="rMenu">        <ul>            <li id="m_add" onclick="addTreeNode();">增加节点</li>            <li id="m_del" onclick="removeTreeNode();">删除节点</li>            <li id="m_check" onclick="checkTreeNode(true);">Check节点</li>            <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>            <li id="m_reset" onclick="resetTree();">恢复zTree</li>        </ul>    </div></body></html>

注意黄色背景代码，效果：