javascript入门之 ztree (八一系列鼠标事件)

最新推荐文章于 2022-03-30 15:38:40 发布

IT蓝月

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量1.6k

点赞数

分类专栏： JavaScript集中营

本文链接：https://blog.csdn.net/ITlanyue/article/details/81583392

版权

JavaScript集中营专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<HTML>
<HEAD>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
    <SCRIPT type="text/javascript">

        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                beforeMouseDown: beforeMouseDown,                               //注册鼠标按下/抬起来/右键前/后的事件
                beforeMouseUp: beforeMouseUp,
                beforeRightClick: beforeRightClick,
                onMouseDown: onMouseDown,
                onMouseUp: onMouseUp,
                onRightClick: onRightClick
            }
        };

        var nodes =[
            { id:1, pId:0, name:"1", open:true},
            { id:11, pId:1, name:"111"},
            { id:12, pId:1, name:"222"},
            { id:13, pId:1, name:"333"},
        ];

        function beforeMouseDown(treeId, treeNode) {
            alert(treeNode.name + "   鼠标按下前");
            return false;                                                       //返回false,不调用按下后
        }
        function onMouseDown(event, treeId, treeNode) {
            alert(treeNode.name + "   鼠标按下后");
        }
        function beforeMouseUp(treeId, treeNode) {
            alert(treeNode.name + "   鼠标抬起来前");
            return true;                                                        //返回true,调用抬起来后
        }
        function onMouseUp(event, treeId, treeNode) {
            alert(treeNode.name + "   鼠标抬起来后");
        }
        function beforeRightClick(treeId, treeNode) {
            alert(treeNode.name + "   鼠标右键前");
            return true;
        }
        function onRightClick(event, treeId, treeNode) {
            alert(treeNode.name + "   鼠标右键后");
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#sys"), setting, nodes);
        });

    </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">

    <div class="zTreeDemoBackground left">
        <ul id="sys" class="ztree"></ul>
    </div>

</div>
</BODY>
</HTML>