好像没找到现成的，就自己写了一个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. 10 sed命令的基本用法

    grep灵活的关联正则表达式实现文件过滤,而sed是一个数据流的编辑器,或者说是一个行编辑器,它将文件一行一行的数据放入到内存中进行编辑,而awk是一个报告生成器,这个我们以后再说: 之前我们介绍过g ...

  2. Alpha预乘-混合与不混合[转]

    作者:John McDonald,于2013年1月31日上午07:57发布 标签:  GameWorks专家开发人员 Alpha Blending几乎是每个3D应用程序的一小部分,但却很重要.从概念上 ...

  3. day2作业（基本数据类型，语法）

    #coding:utf-8 '''1.写代码实现用户输入用户名和密码,当用户名为 seven 且 密码为 123 时,显示登陆成功,否则登陆失败!实现用户输入用户名和密码,当用户名为 seven 且 ...

  4. WPF 去除系统窗体边框，自定义移动窗体

    方法一: 去除系统窗体边框: <Window x:Class="PracticeProject.MainWindow" xmlns="http://schemas. ...

  5. mysql数据库创建编码及排序

    编码 utf-8 排序 utf8_general_ci 不区分大小写,这个你在注册用户名和邮箱的时候就要使用. utf8_general_cs 区分大小写,如果用户名和邮箱用这个 就会照成不良后果 u ...

  6. [Unity基础]RenderTexture

    参考链接: https://www.cnblogs.com/Jimm/p/5951362.html 一.相关API 1.Texture2D.ReadPixels 从RenderTexture.acti ...

  7. 调整navigationItem的位置

    UIBarButtonItem *itemTransformView = [[UIBarButtonItem alloc] initWithCustomView:_header.transformVi ...

  8. 17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

    效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"& ...

  9. 《汇编语言 基于x86处理器》第十章 - 运行一个 16位实地址汇编程序

    ▶ 书上第 10 章,主要讲了宏,引用了一个 16 位实地址的程序,从代码开始到运行 ● 代码 ; main.asm INCLUDE Macros.inc IF IsDefined( RealMode ...

  10. Oracle exp/imp 导出/导入

    set NLS_LANG=AMERICAN_AMERICA.AL32UTF8 exp jjhd_test/11111111@a_syj file="d:\jjhd_test.dmp" ...