1. 1.注意:
  2. 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrlwin键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可!
  3. <!DOCTYPE html>
  4. <script src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>
  5. <HTML>
  6. <HEAD>
  7. <TITLE> ZTREE DEMO - Standard Data </TITLE>
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9. <!--<link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
  10. <!--<script type="text/javascript" src="js/jquery-3.3.1.js"></script>-->
  11. <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>-->
  12. <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.excheck-3.5.js"></script>-->
  13. <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exedit-3.5.js"></script>-->
  14. <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.exhide-3.5.js"></script>-->
  15. <!--<script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>-->
  16. <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  17. <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">
  18. <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  19. <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>
  20. <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>
  21. </HEAD>
  22. <BODY>
  23. <div class="content_wrap">
  24. <div class="zTreeDemoBackground left">
  25. <ul id="demo1" class="ztree"></ul>
  26. <ul id="demo2" class="ztree"></ul>
  27. <ul id="demo3" class="ztree"></ul>
  28. </div>
  29. </div>
  30. <SCRIPT type="text/javascript">
  31. var setting1 = {
  32. check: {
  33. enable: true,
  34. chkStyle: "checkbox"
  35. },
  36. view: {
  37. autoCancelSelected:true, //点击节点时,按下 Ctrl 或 Cmd 键是否允许取消选择操作
  38. selectedMulti:true //设置是否允许同时选中多个节点
  39. },
  40. data: {
  41. simpleData: {
  42. enable: true
  43. }
  44. },
  45. callback: {
  46. beforeClick: beforeClick1,
  47. onClick: onClick1
  48. }
  49. };
  50. var setting2 = {
  51. data: {
  52. simpleData: {
  53. enable: true
  54. }
  55. },
  56. callback: {
  57. beforeClick: beforeClick2,
  58. onClick: onClick2
  59. }
  60. };
  61. var setting3 = {
  62. data: {
  63. simpleData: {
  64. enable: true
  65. }
  66. },
  67. callback:{
  68. beforeCollapse: beforeCollapse, //用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作
  69. //返回值是 true / false
  70. //如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数
  71. beforeExpand: beforeExpand, //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
  72. //返回值是 true / false
  73. //如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数
  74. onCollapse: onCollapse, //用于捕获节点被折叠的事件回调函数
  75. onExpand: onExpand //用于捕获节点被展开的事件回调函数
  76. }
  77. };
  78. var nodes1 =[
  79. { id:1, pId:0, name:"普通的父节点",open:true},
  80. { id:11, pId:1, name:"叶子节点 - 1"},
  81. { id:12, pId:1, name:"叶子节点 - 2"},
  82. { id:2, pId:0, name:"NB的父节点",open:true},
  83. { id:21, pId:2, name:"叶子节点2 - 1"}
  84. ];
  85. var nodes2 =[
  86. { id:1, pId:0, name:"普通的父节点",open:true},
  87. { id:11, pId:1, name:"叶子节点 - 1"},
  88. { id:2, pId:0, name:"NB的父节点",open:true},
  89. { id:21, pId:2, name:"叶子节点2 - 1"}
  90. ];
  91. var nodes3 =[
  92. { id:1, pId:0, name:"父节点1",open:true},
  93. { id:11, pId:1, name:"叶子节点 - 1"},
  94. { id:12, pId:1, name:"叶子节点 - 2"},
  95. { id:13, pId:1, name:"父节点5(无法展开)",expand:false},
  96. { id:41, pId:13, name:"叶子节点 - 1"},
  97. { id:42, pId:13, name:"叶子节点 - 2"},
  98. { id:43, pId:13, name:"叶子节点 - 3"},
  99. { id:2, pId:0, name:"父节点2",open:true},
  100. { id:21, pId:2, name:"父结点3(无法折叠)",collapse:false},
  101. { id:31, pId:21, name:"叶子节点 - 1"},
  102. { id:32, pId:21, name:"叶子节点 - 2"},
  103. { id:33, pId:21, name:"叶子节点 - 3"},
  104. ];
  105. function beforeClick1(treeId, treeNode, clickFlag) {
  106. alert("点击前: " + treeNode.name + ' clickFlag:' + clickFlag.toString());
  107. }
  108. function onClick1(event, treeId, treeNode, clickFlag) {
  109. alert("点击后: " + " (" + (clickFlag===1 ? "普通选中": (clickFlag===0 ? "取消选中" : "追加选中")) + ") clickFlag:" + clickFlag.toString());
  110. }
  111. function onClick2(event, treeId, treeNode, clickFlag) {
  112. alert("该函数不会被执行");
  113. }
  114. function beforeClick2(treeId, treeNode, clickFlag) {
  115. alert("点击前(不会有点击后,不会被选中): " + treeNode.name + ' clickFlag:' + clickFlag.toString());
  116. return false;
  117. }
  118. function beforeCollapse(treeId, treeNode) {
  119. alert(treeNode.name + '折叠前');
  120. return (treeNode.collapse !== false);
  121. }
  122. function onCollapse(event, treeId, treeNode) {
  123. alert(treeNode.name + '折叠后');
  124. }
  125. function beforeExpand(treeId, treeNode) {
  126. alert(treeNode.name + '展开前');
  127. return (treeNode.expand !== false);
  128. }
  129. function onExpand(event, treeId, treeNode) {
  130. alert(treeNode.name + '展开后');
  131. }
  132. $(document).ready(function(){
  133. $.fn.zTree.init($("#demo1"), setting1, nodes1);
  134. $.fn.zTree.init($("#demo2"), setting2, nodes2);
  135. $.fn.zTree.init($("#demo3"), setting3, nodes3);
  136. $("#expandBtn").bind("click", {type:"expand"}, expandNode);
  137. $("#collapseBtn").bind("click", {type:"collapse"}, expandNode);
  138. $("#toggleBtn").bind("click", {type:"toggle"}, expandNode);
  139. $("#expandSonBtn").bind("click", {type:"expandSon"}, expandNode);
  140. $("#collapseSonBtn").bind("click", {type:"collapseSon"}, expandNode);
  141. $("#expandAllBtn").bind("click", {type:"expandAll"}, expandNode);
  142. $("#collapseAllBtn").bind("click", {type:"collapseAll"}, expandNode);
  143. });
  144. </SCRIPT>
  145. </BODY>
  146. </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. frida(hook工具)的环境搭建

    一.简介 frida 是一款基于 python+javascript 的 hook 框架,可运行在 android.ios.linux.win等各个平台,主要使用的动态二进制插桩技术. Frida官网 ...

  2. Open live Writer 直接发布wps文章,优点是可以带上图片

    官方网站: http://openlivewriter.org/ 博客园的设置里面的 MetaWeblog访问地址

  3. 深入理解计算机系统 (CS:APP) 缓冲区漏洞实验 – Buffer Lab 解析

    原文地址:https://billc.io/2019/05/csapp-cachelab/ 写在前面 这是 CSAPP 官网上的第 4 个实验 buflab,也是学校要求的第三个实验.这个实验比上一个 ...

  4. CF1324B Yet Another Palindrome Problem 题解

    原题链接 CF 127个测试点,好评 简要题意: 多组数据,问数组中是否有长度 \(\geq 3\) 的回文子序列. 我们需要找到本质. 题目不让我们求这个长度,只让我们判断,这是为什么呢? 如果答案 ...

  5. Springboot CORS跨域访问

    Springboot CORS跨域访问 什么是跨域 浏览器的同源策略限制: 它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础 ...

  6. Apache服务器故障排除攻略

    Apache服务器故障排除攻略 应用服务器Apache浏览器配置管理网络应用  随着网络技术的普及.应用和Web技术的不断完善,Web服务已经成为互联网上重要的服务形式之一.原有的客户端/服务器模式正 ...

  7. Kaggle大牛小姐姐自述:我是怎么成为竞赛中Top 0.3%的 | 干货攻略

    天天跟数据打交道的研究人员,都有一个成为Kaggle顶级大师(Grandmaster)的梦想. 但每年的Kaggle参赛团队众多,通常一个项目都有数千人至上万人报名,如何在其中脱颖而出? 最近,自动化 ...

  8. java——构造器理解

    构造器理解 什么是构造器 构造器也叫构造方法:用于对象的初始化: 写构造器注意事项 构造器名与类名一致:有返回值但是不能定义返回类型(返回值类型是本类,可以加一个空的return): 构造器的调用 通 ...

  9. CodeForces - 1244D 树(一条链)的染色

    题意:给一个无向的无环的树,需要用三种颜色将他染色,相邻的三个点不能有重复的颜色.给出每个点染成每种颜色的花费,求最小的染色花费,如果给的图不能按要求染色,输出-1. 思路:只有三种颜色,相邻三个点还 ...

  10. EF多租户实例:快速实现分库分表

    前言 来到这篇随笔,我们继续演示如何实现EF多租户. 今天主要是演示多租户下的变形,为下图所示 实施 项目结构 这次我们的示例项目进行了精简,仅有一个API项目,直接包含所有代码. 其中Control ...