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>

javascript入门 之 ztree (六 结点的点击和展开/折叠事件)的更多相关文章

  1. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  2. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  3. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  4. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  5. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  6. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  7. javascript入门 之 ztree（三 简单json数据）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  8. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  9. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. AspNetCore3.1_Secutiry源码解析_2_Authentication_核心对象

    系列文章目录 AspNetCore3.1_Secutiry源码解析_1_目录 AspNetCore3.1_Secutiry源码解析_2_Authentication_核心项目 AspNetCore3. ...

  2. （转）协议森林12 天下为公 (TCP堵塞控制)

    协议森林12 天下为公 (TCP堵塞控制) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在TCP协议中,我们使用连接记录TCP ...

  3. Python习题集（二）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 a = [1, 2 ...

  4. 在Centos系统中基于PowerDNS实现master和slave的域名解析服务双备份

    在上一篇文章中,阐述了如何在Centos 7系统(其他版本的Centos未尝试)中基于PowerDNS和poweradmin自建域名解析服务器替代DnsPod的过程.但是在一般的DNS服务中,我们需要 ...

  5. BJDCTF

    python3的模板注入 非常简单...就是直接执行命令就行..虽然过滤了flag,但是拼接下就好了.... payload: http://fd5883ee-b8e2-4bf1-88af-33936 ...

  6. Java14来了！Switch竟如此简单？Lombok也不需要了？来使用Idea配置Java14的开发环境吧！

    Java 14 在 2020.3.17 日发布正式版了,但现在很多公司还在使用 Java 7 或 Java 8,每当看到 Java 又发布新版本心里就慌得一匹.不过此版本并不是 LTS (长期支持版) ...

  7. 再刷JVM-JVM运行时数据区域

    前言 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域有各自的用途,以及创建和销毁的时机,有的区域随着虚拟机进程的启动而一直存在,有些区域则是依赖用户线程 ...

  8. Asp.Net Core 中IdentityServer4 实战之 Claim详解

    一.前言 由于疫情原因,让我开始了以博客的方式来学习和分享技术(持续分享的过程也是自己学习成长的过程),同时也让更多的初学者学习到相关知识,如果我的文章中有分析不到位的地方,还请大家多多指教:以后我会 ...

  9. jsp(3，6，9) EL表达式及JSTL

    1. jsp 1.1jsp是什么 全称: Java Server Pages,java服务器页面.和Servlet一样,是sun公司定义的一种动态网页开发技术.    特点:基于html模版,可以在h ...

  10. ThinkPHP5.0 漏洞测试

    ThinkPHP5.0 漏洞测试 自从ThinkPHP发布漏洞补丁以来,服务器不知道多少次受到了批量扫描漏洞来抓取肉鸡的请求 虽然官方早已发布补丁,还是想试一下TP漏洞,测试两个漏洞 一.全版本执行漏 ...