好像没找到现成的，就自己写了一个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 ...