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

    一.urllib库 概念:urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urll ...

  2. Best Practice AngularJS

    Best Practice AngularJS /* 用几组简明扼要的代码段及其说明, 展示良好的编程行为, angularjs */ // app.module.js angular .module ...

  3. Linux服务器安装Nginx

    Nginx 安装 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.首先 ...

  4. JMeter性能（压力）测试--使用解锁

    1. 首先去官网下载JMeter:  http://jmeter.apache.org/download_jmeter.cgi 2. 解压缩后到目录 \apache-jmeter-5.0\bin 下找 ...

  5. linux安装python3 ,安装IPython ,安装jupyter notebook

    安装python3    下载到 /opt/中 1.下载python3源码,选择3.6.7因为ipython依赖于>3.6的python环境wget https://www.python.org ...

  6. Shell 格式化输出数字、字符串(printf)

    1.语法 printf打印格式字符串,解释'%'指令和'\'转义. 1.1.转义 printf使用时需要指定输出格式,输出后不换行. printf FORMAT [ARGUMENT] printf O ...

  7. mysql 动态拼接表字段，值 mybatis 动态获取表字段

    -- 取表所有字段,自动用逗号分开 select GROUP_CONCAT(DISTINCT COLUMN_NAME) from information_schema.columns where ta ...

  8. 《算法》第四章部分程序 part 6

    ▶ 书中第四章部分程序,加上自己补充的代码,图的环相关 ● 无向图中寻找环 package package01; import edu.princeton.cs.algs4.In; import ed ...

  9. List转数组

    eg: List<Product> products = new ArrayList<Product>(); Product[] array = products.toArra ...

  10. JEECG前后端分离UI框架实战抢先体验（ng2-admin+Angular4+AdminLTE+WebStorm）

    JEECG前后端分离UI框架 (ng2-admin+Angular4+AdminLTE) 关键词: ng2-admin.Angular4.AdminLTE.Nodejs.Jeecg JEECG紧跟技术 ...