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

效果如下：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="../jquery-2.1.4.js"></script>

    <link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

    <script src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>

    <script type="text/javascript">

        //获取当前父节点 参数：等级

        var getNodeByLevel = function (arr, level) {

            for (var i = ; i < arr.length; i++) {

                var item = arr[i];

                if (item.level == level) {

                    return item;

                }

            }

            return null;

        };

        //折叠节点 非当前父节点

        var collapseNodes = function (allTwoNodes, twoNode) {

            for (var i = ; i < allTwoNodes.length; i++) {

                var item = allTwoNodes[i];

                if ((twoNode != null) && (twoNode.id == item.id)) {

                    continue;

                }

                treeObj.expandNode(item, false, true, false);

            }

        }

        var zNodes = [

            // 第一层

            { id: , pId: , name: "父节点1 - 展开", open: true },

            // 第二层

            { id: , pId: , name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },

            // 第三层

            { id: , pId: , name: "叶子节点111", click: false, open: true },

            { id: , pId: , name: "叶子节点112", open: true },

            // 第四层

            { id: , pId: , name: "三级1" },

            { id: , pId: , name: "三级2" },

            { id: , pId: , name: "三级3" },

            // 第二层

            { id: , pId: , name: "父节点12", open: true },

            // 第三层

            { id: , pId: , name: "叶子节点121" },

            { id: , pId: , name: "叶子节点122", open: true },

            // 第四层

            { id: , pId: , name: "三级1" },

            { id: , pId: , name: "三级2" },

            { id: , pId: , name: "三级3" },

        ];

        var setting = {

            type: "expandAll",//全部展开

            view: {

                showLine: false,//不显示连接线

            },

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback: { //回调函数

                beforeClick: function (treeId, treeNode, clickFlag) {

                },

                onClick: function (vent, treeId, treeNode, clickFlag) {

                    //console.log(treeNode);

                    //console.log(treeNode.getParentNode());

                    //console.log(treeNode.getIndex());

                    //console.log(treeNode.getPath());

                    var nodes = treeNode.getPath();

                    var twoNode = getNodeByLevel(nodes, );

                    var oneNode = getNodeByLevel(nodes, );

                    var allTwoNodes = oneNode.children;

                    collapseNodes(allTwoNodes, twoNode);

                },

                onCollapse: function (event, treeId, treeNode) {

                    //alert('onCollapse / 折叠');//折叠

                },

                onExpand: function (event, treeId, treeNode) {

                    //alert('onExpand / 展开');//展开

                }

            }

        };

        //树初始化

        var treeObj = null;

        $(document).ready(function () {

            treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });

    </script>

</head>

<body>

    <div class="content_wrap">

        <div class="zTreeDemoBackground left">

            <!-- ztree的容器 -->

            <ul id="treeDemo" class="ztree"></ul>

        </div>

    </div>

</body>

</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. 查看Selinux和关闭Selinux

    查看Selinux和关闭Selinux   注:本文非原创文章,转自以下: 链接:https://www.jianshu.com/p/a7900dbf893c 查看SELinux状态: /usr/sb ...

  2. ant编译时提示一大堆软件包不存在的问题

    ant编译时提示一大堆软件包不存在的问题  解决方案: 把项目的 lib 里的jar包 放的 jdk的jre的ext的目录下 例如 java home 是 D:JavaEEJavajdk1.8.0_1 ...

  3. redis的5种类型和所用命令

    数据操作 redis是key-value的数据,所以每个数据都是一个键值对 键的类型是字符串 值的类型分为五种: 字符串string 哈希hash 列表list 集合set 有序集合zset 数据操作 ...

  4. [Android]Android布局优化之<include />

    转载请标明:转载于http://www.cnblogs.com/Liuyt-61/p/6602891.html -------------------------------------------- ...

  5. openstack provider self-service network subnet 创建

  6. 6.简单提取小红书app数据(简单初步试采集与分析)-1

    采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...

  7. userdel 用户名 出现“用户**目前已登录”

    userdel 用户名 出现“用户**目前已登录” 今天在删除用户账号的时候,发现一个奇怪现象,即: userdel: user newname is currently logged in 相关命令 ...

  8. mybatis-spring 集成

    http://www.mybatis.org/spring/zh/index.html http://www.mybatis.org/mybatis-3/zh/java-api.html 编程API: ...

  9. hdfs standby namenode checkpoint 的一些参数

    dfs.namenode.checkpoint.period --两次检查点创建之间的固定时间间隔,默认3600,即1小时.所以去ann snn 看到的fsimage 相隔1个小时. dfs.name ...

  10. JMeter之Ramp-up Period（in seconds）说明

    Ramp-up Period(in seconds) [1]决定多长时间启动所有线程.如果使用10个线程,ramp-up period是100秒,那么JMeter用100秒使所有10个线程启动并运行. ...