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>

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

javascript入门之 ztree(七结点的查询)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
javascript入门之 zTree（十四增删查改）（二）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...
javascript入门之 zTree（十三移动/复制事件）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...
javascript入门之 zTree（十二托拽事件（二））
1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...
javascript入门之 zTree（十一托拽事件（一））
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...
javascript入门之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
javascript入门之 ztree（三简单json数据）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...
javascript入门之 zTree（十四增删查改）（一）
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...
javascript入门之 ztree (九单/复选框问题)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

基于kylinTOP工具的HTTP2压力测试
1.HTTP协议概述说到http,那就应该先了解一下http协议的发展历史.关于http协议的历史,可以参考阮一峰老师的这篇博客文章HTTP 协议入门,里面介绍的比较详细了.简单来说http先后存在 ...
CentOS7使用tar.gz方法安装php7.2.8
软件:VMware 系统版本:CentOS7 1.检查系统里是否有安装的PHP包,如果有的话先删除 [root@localhost ~]# yum list installed | grep php ...
C/C++、C#、JAVA(二)：基本类型和转换操作
基本类型和转换操作数据类型 C语言中的基本类型如下. 类型存储大小值范围 char 1 字节 -128 到 127 或 0 到 255 unsigned char 1 字节 0 到 255 si ...
[Visual Basic]二分查找
模板 i=1:j=n 'i初值为1,j初值为n Do while i<=j '当i<=j时,通过循环进行查找 m=fix((i+j)/2) '计算出中间元素的下标m If d(m)=key ...
IE 跨域session丢失问题
在测试时发现session 取不到值,以为是session赋值除了问题,但是在Chrome中一切正常,故排除此原因.那问题肯定出在浏览器身上里.于是一步一步调试,发现在IE中,如果页面跳转,Sessi ...
SpringBoot2 + Druid + Mybatis 多数据源动态配置
在大数据高并发的应用场景下,为了更快的响应用户请求,读写分离是比较常见的应对方案.读写分离会使用多数据源的使用.下面记录如何搭建SpringBoot2 + Druid + Mybatis 多数据源配 ...
3 report formats of SFDC
Choose one of the following report formats using the Format menu of the report builder. Tabular form ...
effective-java学习笔记---静态工厂方法替代构造方法
使用静态方法的优点: 1.它们是有名字的,生成的客户端代码更易阅读. 如:返回素数的静态方法 BigInteger.probablePrime 2.与构造方法不同,它们不需要每次调用时都创建一个对象. ...
Tensorflow系列专题（四）：神经网络篇之前馈神经网络综述
目录: 神经网络前言神经网络感知机模型多层神经网络激活函数 Logistic函数 Tanh函数 ReLu函数损失函数和输出单元损失函数的选择均方误差损失函数交叉熵损失函数输出单元的选 ...
java并发安全
本次内容主要线程的安全性.死锁相关知识点. 1.什么是线程安全性 1.1 线程安全定义前面使用8个篇幅讲到了Java并发编程的知识,那么我们有没有想过什么是线程的安全性?在<Java并发编程 ...

javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

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

随机推荐

热门专题

javascript入门之 ztree (六结点的点击和展开/折叠事件)

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