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 ...
随机推荐
- ubuntu下使用apt-get install安装软件的安装位置
在ubuntu下使用 apt-get install 或 apt install 下载安装软件,软件下载及安装后的目录.: A.下载的软件的存放位置:/var/cache/apt/archives B ...
- linux相关的帮助文档
几乎所有linux发行版都会提供大量的有用的文档. 手册页 linux发行版包含了有关常用命令.系统调用和库函数的手册页.手册页被分成不同的章节并分别标以序号: Section 名称 ...
- C语言之歌词解析
0x00 脚下的路 不知道为啥要写这个小标题,可能是年轻的心想体验一下苍老的感觉,抑或是少年的一阵迷茫.混沌的四年,终究还是入了这一行.从初时的不知,到现在的刚开始,中间的间隔竟是四年之久,想起了陈奕 ...
- 第十八周java实验作业
实验十八 总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...
- 手把手教你用java实现syslog消息的收发，学不会你打我喽！
大家好,我是道哥,专注于后端java开发,喜欢写作和分享.如果觉得文章对你有用,那就点个赞呗!如果能转发那是对道哥最大的支持! syslog的定义 见文知义,syslog,从英文名字上可以看出是指系统 ...
- SSI服务器端包含注入
服务器端嵌入:Server Side Include,是一种类似于ASP的基于服务器的网页制作技术.大多数(尤其是基于Unix平台)的WEB服务器如Netscape Enterprise Server ...
- python set() leetcode 签到820. 单词的压缩编码
题目 给定一个单词列表,我们将这个列表编码成一个索引字符串 S 与一个索引列表 A. 例如,如果这个列表是 ["time", "me", "bell& ...
- SpringBoot 整合 MyCat 实现读写分离
MyCat一个彻底开源的,面向企业应用开发的大数据库集群.基于阿里开源的Cobar产品而研发.能满足数据库数据大量存储:提高了查询性能.文章介绍如何实现MyCat连接MySQL实现主从分离,并集成Sp ...
- OpenCV-Python 模板匹配 | 三十一
目标 在本章中,您将学习 使用模板匹配在图像中查找对象 你将看到以下功能:cv.matchTemplate(),cv.minMaxLoc() 理论 模板匹配是一种用于在较大图像中搜索和查找模板图像位置 ...
- 在Fedora中安装OpenCV-Python | 二
目标 在本教程中 我们将学习在你的Fedora系统中设置OpenCV-Python.针对Fedora 18(64位)和Fedora 19(32位)进行以下步骤. 介绍 可以通过两种方式在Fedora中 ...