好像没找到现成的,就自己写了一个demo。

效果如下:

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <script src="../jquery-2.1.4.js"></script>
  8. <link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
  9. <script src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>
  10.  
  11. <script type="text/javascript">
  12.  
  13. //获取当前父节点 参数:等级
  14. var getNodeByLevel = function (arr, level) {
  15. for (var i = ; i < arr.length; i++) {
  16. var item = arr[i];
  17. if (item.level == level) {
  18. return item;
  19. }
  20. }
  21. return null;
  22. };
  23.  
  24. //折叠节点 非当前父节点
  25. var collapseNodes = function (allTwoNodes, twoNode) {
  26. for (var i = ; i < allTwoNodes.length; i++) {
  27. var item = allTwoNodes[i];
  28. if ((twoNode != null) && (twoNode.id == item.id)) {
  29. continue;
  30. }
  31. treeObj.expandNode(item, false, true, false);
  32. }
  33. }
  34.  
  35. var zNodes = [
  36. // 第一层
  37. { id: , pId: , name: "父节点1 - 展开", open: true },
  38.  
  39. // 第二层
  40. { id: , pId: , name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },
  41. // 第三层
  42. { id: , pId: , name: "叶子节点111", click: false, open: true },
  43. { id: , pId: , name: "叶子节点112", open: true },
  44. // 第四层
  45. { id: , pId: , name: "三级1" },
  46. { id: , pId: , name: "三级2" },
  47. { id: , pId: , name: "三级3" },
  48.  
  49. // 第二层
  50. { id: , pId: , name: "父节点12", open: true },
  51. // 第三层
  52. { id: , pId: , name: "叶子节点121" },
  53. { id: , pId: , name: "叶子节点122", open: true },
  54. // 第四层
  55. { id: , pId: , name: "三级1" },
  56. { id: , pId: , name: "三级2" },
  57. { id: , pId: , name: "三级3" },
  58. ];
  59.  
  60. var setting = {
  61. type: "expandAll",//全部展开
  62. view: {
  63. showLine: false,//不显示连接线
  64. },
  65. data: {
  66. simpleData: {
  67. enable: true
  68. }
  69. },
  70. callback: { //回调函数
  71. beforeClick: function (treeId, treeNode, clickFlag) {
  72.  
  73. },
  74. onClick: function (vent, treeId, treeNode, clickFlag) {
  75. //console.log(treeNode);
  76. //console.log(treeNode.getParentNode());
  77. //console.log(treeNode.getIndex());
  78. //console.log(treeNode.getPath());
  79. var nodes = treeNode.getPath();
  80. var twoNode = getNodeByLevel(nodes, );
  81. var oneNode = getNodeByLevel(nodes, );
  82. var allTwoNodes = oneNode.children;
  83. collapseNodes(allTwoNodes, twoNode);
  84. },
  85. onCollapse: function (event, treeId, treeNode) {
  86. //alert('onCollapse / 折叠');//折叠
  87. },
  88. onExpand: function (event, treeId, treeNode) {
  89. //alert('onExpand / 展开');//展开
  90. }
  91. }
  92. };
  93.  
  94. //树初始化
  95. var treeObj = null;
  96. $(document).ready(function () {
  97. treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  98. });
  99.  
  100. </script>
  101. </head>
  102. <body>
  103. <div class="content_wrap">
  104. <div class="zTreeDemoBackground left">
  105. <!-- ztree的容器 -->
  106. <ul id="treeDemo" class="ztree"></ul>
  107. </div>
  108. </div>
  109. </body>
  110. </html>

JQuery/JS插件 zTree树,点击当前节点展开,其他节点关闭的更多相关文章

  1. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...

  2. js插件ztree使用

    最新给公司后台写了一个配置页面,在网上搜到一个js插件ztree,记录一下使用心得. 首先说一下ztree官网,好多方法我都是从官网api上学习的,官网地址http://www.treejs.cn/v ...

  3. JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

    jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...

  4. JQuery/JS插件 jsTree加载树,普通加载,点一级加载一级

    前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  5. jQuery.TreeView插件实现树状导航(十三)

    一:jQuery.TreeView插件简介 该插件的特点: 1.支持静态的树,即一次性将全部数据加载到客户端. 2.支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据. 3.支持节点级联 ...

  6. zTree怎么判断树有节点展开或者完全关闭的

    树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...

  7. JQuery Tree插件——zTree

    Demo:点击下载 zTree 在线操作演示:http://www.ztree.me/v3/demo.php#_101

  8. 一个功能丰富的 jQuery 树形插件 z-tree

    链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松,    如果有一两个复杂的点, 可以参考ZTree

  9. JQuery/JS插件 日期插件

    用于日期的计算,功能比较全,我常用的主要是日期的计算(多一天少一天,或者添加几个月等),日期格式化 网址:http://momentjs.cn/ 测试代码: <!DOCTYPE html> ...

随机推荐

  1. Java 10 - Java Character类

    Java Character类 使用字符时,我们通常使用的是内置数据类型char. 实例 char ch = 'a'; // Unicode for uppercase Greek omega cha ...

  2. phalcon断点调试(phpStorm+xdebug)

    1.下载并添加chrome插件xdebug helper,下载地址:http://www.downcc.com/soft/261091.html 2.php添加xdebug扩展 mkdir -p /u ...

  3. 503 Error: need EHLO and AUTH first

    设置OUTLOOK2013使用QQ邮箱,按照QQ邮箱的配置介绍设置好后,收邮件的服务可以了,但是发送邮件的服务失败,报错:503 Error: need EHLO and AUTH first,经查, ...

  4. jmeter关联Websocket包支持

    消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...

  5. LInux下的jdk环境置

    1.Linux下使用wget下载jdk8: 进入目录/usr/local/software 2.解压 tar -zxvf  jdk-8u152-linux-x64.tar.gz 3.配置环境变量 vi ...

  6. django---单表操作之增删改

    首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. android 开发 碎片Fragment布局例子(用按键切换碎片布局)

    实现思路: 1.写一个父类布局,里面写一个按键和一个帧布局(用于给Fragment布局后续替代) 2.写3个子布局,并且在写3个class继承Fragment布局 3.在MainActivity的cl ...

  8. 使用jQuery编辑删除页面内容,两种方式

    第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...

  9. docekr-image的区别和container;docker run和start,create

    copy by: https://www.simapple.com/326.html 容器(container)的定义和镜像(image)几乎一模一样,也是一堆层的统一视角,唯一区别在于容器的最上面那 ...

  10. 24.纯 CSS 创作出平滑的层叠海浪特效

    原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...