zoukankan      html  css  js  c++  java
  • javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意:
    测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可!
    
    <!DOCTYPE html>
    <script src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <HTML>
    <HEAD>
        <TITLE> ZTREE DEMO - Standard Data </TITLE>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
        <!--<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
        <!--<script type="text/javascript" src="js/jquery-3.3.1.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exhide-3.5.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>-->
    
        <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>
    </HEAD>
    
    <BODY>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="demo1" class="ztree"></ul>
            <ul id="demo2" class="ztree"></ul>
            <ul id="demo3" class="ztree"></ul>
        </div>
    </div>
    <SCRIPT type="text/javascript">
    
        var setting1 = {
    
            check: {
                enable: true,
                chkStyle: "checkbox"
            },
    
    
            view: {
                autoCancelSelected:true,                //点击节点时,按下 Ctrl 或 Cmd 键是否允许取消选择操作
                selectedMulti:true                      //设置是否允许同时选中多个节点
            },
    
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick1,
                onClick: onClick1
            }
        };
    
        var setting2 = {
    
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick2,
                onClick: onClick2
            }
        };
    
        var setting3 = {
    
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                
                beforeCollapse: beforeCollapse,                //用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作
                //返回值是 true / false
                //如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数
                beforeExpand: beforeExpand,                   //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
                //返回值是 true / false
                //如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数
                onCollapse: onCollapse,                      //用于捕获节点被折叠的事件回调函数
                onExpand: onExpand                      //用于捕获节点被展开的事件回调函数
            }
        };
    
    
        var nodes1 =[
            { id:1, pId:0, name:"普通的父节点",open:true},
            { id:11, pId:1, name:"叶子节点 - 1"},
            { id:12, pId:1, name:"叶子节点 - 2"},
            { id:2, pId:0, name:"NB的父节点",open:true},
            { id:21, pId:2, name:"叶子节点2 - 1"}
        ];
    
        var nodes2 =[
            { id:1, pId:0, name:"普通的父节点",open:true},
            { id:11, pId:1, name:"叶子节点 - 1"},
            { id:2, pId:0, name:"NB的父节点",open:true},
            { id:21, pId:2, name:"叶子节点2 - 1"}
        ];
    
        var nodes3 =[
            { id:1, pId:0, name:"父节点1",open:true},
            { id:11, pId:1, name:"叶子节点 - 1"},
            { id:12, pId:1, name:"叶子节点 - 2"},
            { id:13, pId:1, name:"父节点5(无法展开)",expand:false},
            { id:41, pId:13, name:"叶子节点 - 1"},
            { id:42, pId:13, name:"叶子节点 - 2"},
            { id:43, pId:13, name:"叶子节点 - 3"},
            { id:2, pId:0, name:"父节点2",open:true},
            { id:21, pId:2, name:"父结点3(无法折叠)",collapse:false},
            { id:31, pId:21, name:"叶子节点 - 1"},
            { id:32, pId:21, name:"叶子节点 - 2"},
            { id:33, pId:21, name:"叶子节点 - 3"},
        ];
    
        function beforeClick1(treeId, treeNode, clickFlag) {
            alert("点击前:  " + treeNode.name + '  clickFlag:' + clickFlag.toString());
        }
        function onClick1(event, treeId, treeNode, clickFlag) {
            alert("点击后:  " + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "取消选中" : "追加选中")) + ")  clickFlag:" + clickFlag.toString());
        }
    
        function onClick2(event, treeId, treeNode, clickFlag) {
            alert("该函数不会被执行");
        }
    
        function beforeClick2(treeId, treeNode, clickFlag) {
            alert("点击前(不会有点击后,不会被选中):  " + treeNode.name + '  clickFlag:' + clickFlag.toString());
            return false;
        }
    
        function beforeCollapse(treeId, treeNode) {
            alert(treeNode.name + '折叠前');
            return (treeNode.collapse !== false);
        }
        function onCollapse(event, treeId, treeNode) {
            alert(treeNode.name + '折叠后');
        }
        function beforeExpand(treeId, treeNode) {
            alert(treeNode.name + '展开前');
            return (treeNode.expand !== false);
        }
        function onExpand(event, treeId, treeNode) {
            alert(treeNode.name + '展开后');
        }
    
        $(document).ready(function(){
            $.fn.zTree.init($("#demo1"), setting1, nodes1);
            $.fn.zTree.init($("#demo2"), setting2, nodes2);
            $.fn.zTree.init($("#demo3"), setting3, nodes3);
    
            $("#expandBtn").bind("click", {type:"expand"}, expandNode);
            $("#collapseBtn").bind("click", {type:"collapse"}, expandNode);
            $("#toggleBtn").bind("click", {type:"toggle"}, expandNode);
            $("#expandSonBtn").bind("click", {type:"expandSon"}, expandNode);
            $("#collapseSonBtn").bind("click", {type:"collapseSon"}, expandNode);
            $("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
            $("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
        });
    
    </SCRIPT>
    </BODY>
    </HTML>
    
  • 相关阅读:
    设计模式之单例模式(Singleton)
    ASP.Net WebForm温故知新学习笔记:二、ViewState与UpdatePanel探秘
    ASP.Net WebForm温故知新学习笔记:一、aspx与服务器控件探秘
    [学习笔记] $Maximum$ $Minimum$ $identity$
    BZOJ 2159: Crash 的文明世界(组合数学+第二类斯特林数+树形dp)
    BZOJ 3083: 遥远的国度 (树剖+线段树)
    LUOGU P4560 [IOI2014]Wall 砖墙 (线段树)
    牛客网 NOIP赛前集训营-普及组(第四场)C--部分和 (高维前缀和)
    LUOGU P1501 [国家集训队]Tree II (lct)
    LUOGU P3690 【模板】Link Cut Tree (lct)
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700650.html
Copyright © 2011-2022 走看看