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

    java.util.Scanner是Java5的新特征,我们可以通过 Scanner 类来获取用户的输入. 下面是创建 Scanner 对象的基本语法: Scanner s = new Scanner ...

  2. vmware centos7 动态ip->静态

    TYPE=Ethernet BOOTPROTO=none DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV6_ ...

  3. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

  4. Python 3.6 -win64环境安装PIL模块

    PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. 由于PIL仅支持到Python 2.7,加上年久失修 ...

  5. atom编辑器适用

    因为要在多平台下适用node,同事推荐atom.所以下载了进行试用. 1.下载 https://atom.io/

  6. （二）apache atlas配置和运行

    上一篇文章,我们已经构建出了altas的安装包,所以我们继续使用安装包配置和运行atlas 首先解压atlas压缩包,授予bin目录下的执行权限 1.默认启动atlas cd atlas/bin/ p ...

  7. Maven传递依懒

    A依赖B,B依赖C.B是A的直接依赖,C是A的传递依赖. 1.Maven自己调解原则 先定义者优级先原则,谁先定义就用谁的传递依赖. 路径近者优级先原则,直接依赖级别高高于传递依赖. 2.排除依懒 & ...

  8. Yii框架中使用SRBAC作为权限管理模块时遇到的问题

    Yii框架中使用SRBAC作为权限管理模块时遇到的问题   看到Yii中提供RBAC的插件,SRBAC,就想用用. 结果按照手册上的安装办法,整来整去,安装完了,可就是进不了权限管理界面. 最后想到, ...

  9. es 测试代码

    测试代码 PUT test/doc/1 { "num": 1.0 } PUT test/doc/2 { "num": 2.0 } POST _scripts/j ...

  10. 简单ATM机功能实现及感想

    感想:  在那一天下午气喘吁吁的上了六楼 在建民的课上 都要带电脑 第一次上这样的课,每一次都是个段子 ,这一次考试是学前考试,什么也不知道 ,但是通过百度, 发现JAVA有很多还都和C语言相似的地方 ...