简单入门使用，熟悉其功能，没有与异步调用后台数据，用的是本地设置的数据。

zTree的API：http://www.treejs.cn/v3/api.php

源码：https://github.com/xiaostudy/web_sample

先看效果

目录结构

代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="../css/demo.css" type="text/css">

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

     <script src="../js/jquery-1.4.4.min.js"></script>

     <script src="../js/zTree/jquery.ztree.all.js"></script>

     <script src="../js/zTree/jquery.ztree.exhide.js"></script>

     <script type="text/javascript">

         // 页面加载后初始化zTree数据且默认展开所有节点

         $(document).ready(function () {

             $.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);//第一个参数 tree存在位置，第二个参数 设置，第三个参数 数据

             //.expandAll(true)表示展开全部节点，如果为false表示折叠全部节点

         });

         //设置

         var setting = {

             check: {//复选框设置

                 enable: true,//显示复选框

                 chkStyle: "checkbox",//勾选框类型(checkbox 或 radio），默认checkbox，[setting.check.enable = true 时生效],

                 // Y 属性定义 checkbox 被勾选后的情况； N 属性定义 checkbox 取消勾选后的情况； "p" 表示操作会影响父级节点； "s" 表示操作会影响子级节点。

                 chkboxType: { "Y": "s", "N": "s" },//勾选 checkbox 对于父子节点的关联关系，默认值：{ "Y": "ps", "N": "ps" }。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]

                 nocheckInherit: false//当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效]

             },

             data: {//数据设置

                 simpleData: {//说明：其中的id不是html上的id，是节点上的id，html上看不到的

                     enable: true,//默认值：false，确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array),不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式

                     rootPId: -1,//根节点的父节点id值，默认值：null，用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]

                     idKey: "id",//当前节点id名称，默认值："id"，节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]

                     pIdKey: "parentId"//当前节点的父节点id名称，默认值："pId"，节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]

                 }

             },

             callback : {//事件设置

                 onClick : zTreeOnClick,// 树的点击事件

                 onCheck : zTreeOnCheck,// 点击复选框事件

                 // onAsyncSuccess : ztreeOnAsyncSuccess,// 异步加载成功后执行的方法

             }

         };

         //ztree用于初始化的静态数据

         var zNodes = [

             { id: 1, parentId: 0, name: "随意勾选 1", nocheck: true },//id[setting.data.idKey]当前节点唯一标识，parentId[setting.data.pIdKey]当前节点的父节点唯一标识

             { id: 11, parentId: 1, name: "随意勾选 1-1", nocheck: true },// name节点显示名称

             { id: 111, parentId: 11, name: "无 checkbox 1-1-1", nocheck: true },// nocheck: true表示不显示复选框

             { id: 112, parentId: 11, name: "随意勾选 1-1-2", nocheck: true },

             { id: 12, parentId: 1, name: "无 checkbox 1-2", nocheck: true },

             { id: 2, parentId: 0, name: "随意勾选 2", nocheck: true },

         ];

         //过滤节点的机制 直接return node表示不做任何过滤

         function filter(node) {

             return node;

         }

         ///动态设置zTree的所有节点有checkbox

         function DynamicUpdateNodeCheck() {

             var zTree = $.fn.zTree.getZTreeObj("treeDemo");

             //根据过滤机制获得zTree的所有节点

             var nodes = zTree.getNodesByFilter(filter);

             //遍历每一个节点然后动态更新nocheck属性值

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

                 var node = nodes[i];

                 node.nocheck = false; //表示显示checkbox

                 zTree.updateNode(node);

             }

         }

         ///动态设置zTree的所有节点无checkbox

         function DynamicUpdateNoNodeCheck() {

             var zTree = $.fn.zTree.getZTreeObj("treeDemo");

             //根据过滤机制获得zTree的所有节点

             var nodes = zTree.getNodesByFilter(filter);

             //遍历每一个节点然后动态更新nocheck属性值

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

                 var node = nodes[i];

                 node.nocheck = true; //表示不显示checkbox

                 zTree.updateNode(node);

             }

         }

         //动态设置隐藏zTree所有节点

         function hiddenNodes() {

             var zTree = $.fn.zTree.getZTreeObj("treeDemo");

             //根据过滤机制获得zTree的所有节点

             var nodes = zTree.getNodesByFilter(filter);

             //隐藏节点

             zTree.hideNodes(nodes);

         }

         //动态设置显示zTree所有节点

         function showNodes() {

             var zTree = $.fn.zTree.getZTreeObj("treeDemo");

             //根据过滤机制获得zTree的所有节点

             var nodes = zTree.getNodesByFilter(filter);

             //显示节点

             zTree.showNodes(nodes);

         }

         //点击事件

         function zTreeOnClick(event, treeId, treeNode) {

             console.log("点击事件>>>>>开始");

             var id = treeNode.id;

             var parentId = treeNode.parentId;

             var childrenList = treeNode.children;

             console.log("id:" + id);

             console.log("parentId:" + parentId);

             console.log("childrenList:" + childrenList);

             if(undefined == childrenList) {

                 console.log("是否是父节点:" + false);

             } else {

                 console.log("是否是父节点:" + true);

             }

             console.log("点击事件<<<<<结束");

         }

         //点击复选框事件

         function zTreeOnCheck(event, treeId, treeNode) {

             console.log("点击复选框事件>>>>>开始");

             var id = treeNode.id;

             var parentId = treeNode.parentId;

             var childrenList = treeNode.children;

             console.log("id:" + id);

             console.log("parentId:" + parentId);

             console.log("childrenList:" + childrenList);

             if(undefined == childrenList) {

                 console.log("是否是父节点:" + false);

             } else {

                 console.log("是否是父节点:" + true);

             }

             console.log("点击复选框事件<<<<<结束");

         }

         // 获取树成功后进行的回调操作

         /*function ztreeOnAsyncSuccess(event, treeId, treeNode) {

             console.log("回调操作");

         }*/

     </script>

 </head>

 <body>

 <h1>

     Checkbox nocheck 演示</h1>

 <div class="content_wrap">

     <div class="zTreeDemoBackground left">

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

     </div>

     <div class="right">

         <p>

             默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。</p>

         <p>

             zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。</p>

         <h3>

             STEP DAY</h3>

         <div>

             <input type="button" value="动态设置节点有checkbox" onclick="DynamicUpdateNodeCheck()" />

         </div>

         <div>

             <input type="button" value="动态设置节点无checkbox" onclick="DynamicUpdateNoNodeCheck()" />

         </div>

         <div>

             <input type="button" value="隐藏全部节点" onclick="hiddenNodes()" />

         </div>

         <div>

             <input type="button" value="显示全部节点" onclick="showNodes()" />

         </div>

     </div>

 </div>

 </body>

 </html>

zTree入门使用的更多相关文章

  1. ztree入门

    ztree入门 ztree可用于权限管理,机构部门等有层次的数据 准备工作 ztree官网 点击右上角的GitHub或者码云的地址将demo下载到本地 在本地新建一个项目,将下载的文件中zTreeSt ...

  2. zTree入门-最简单的树

    最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了 一个最简单的树形结构. 案例:zT ...

  3. java菜鸟篇<四> ZTree入门篇

    今天准备入手ZTree,于是在百度上搜了搜,找到了开源网址和一些大神们的教程,于是乎下午开始了组织树(ZTree)的练习 初步完整的作品是这个样子的: 1.咱们要去这个工具的开源网里找下载的东西: ( ...

  4. zTree入门实例（一眼就看会）

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”. 下载地址:https://gitee.com/zTree/zTree_v3 待会将上面划的三个文件复制到Java的Web工程下即可 先 ...

  5. vue引入zTree入门

    参考1:https://blog.csdn.net/tg928600774/article/details/80911589 参考2:https://blog.csdn.net/ylhsuper/ar ...

  6. ztree带有选项框的树形菜单使用

    1.ztree简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.专门适合项目开发,尤其是 树状菜单.树状数据的Web ...

  7. zTree学习笔记

    一.zTree的下载 官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 解压后的目录结构为: 二.zTree入门案例 2.1 在页面中引入相关文件 要使用z ...

  8. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

  9. Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

    本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...

随机推荐

  1. 6、获取Class中的方法

    6.获取Class中的方法 6.1 getMethods() 获取的都是共有的方法(包括父类) 返回包含一个数组 方法对象反射由此表示的类或接口的所有公共方法 类对象,包括那些由类或接口和那些从超类和 ...

  2. UDP c/s 模型

    server.c /* udp server.c */ #include <string.h> #include <netinet/in.h> #include <std ...

  3. 十、mount挂载 fstab swap

    一.挂载和卸载文件系统 将额外文件系统与根文件系统某现存的目录建立起关联关系.进而使得此目录做为其它文件访问入口的行为称之为挂载 根文件系统之外的其它文件系统要想能够被访问,都必须通过“关联”至根文件 ...

  4. 关于rsa公钥格式的处理，一行纯内容进行换行格式化

    最近在开发百度小程序,他的平台公钥是纯字符串,公钥的内容,没有rsa文件的头(-----BEGIN PUBLIC KEY-----)和尾部分-----END PUBLIC KEY----- 但是 PH ...

  5. CF1214D

    CF1214D 题意: 给你一个 $ n \times m $ 的矩阵,求最少用多少个障碍,将 $ (1,1) $ 到 $ (n,m) $ 的路径堵死. 题意: 因为可以将起点两边堵死,所以答案最多是 ...

  6. 用Ajax请求后台数据

    我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <%@ page language="java" contentType=" ...

  7. 感知机算法及BP神经网络

    简介:感知机在1957年就已经提出,可以说是最为古老的分类方法之一了.是很多算法的鼻祖,比如说BP神经网络.虽然在今天看来它的分类模型在很多数时候泛化能力不强,但是它的原理却值得好好研究.先学好感知机 ...

  8. U盘exFAT格式转NTFS

    先格式化成FAT或者FAT32(这个简单,右键格式化就成),然后点开始,运行,输入cmd,在里面输入: convert I:/fs:ntfs I是你U盘的字母(大写),完成

  9. mongoose 安装及配置

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方>案.MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据 ...

  10. Mac 卸载Python3.6

    Mac 自带的 Python 已经能够满足我们的需要了,因此很多同学在安装完 Python 之后,又想要将其删除,或者称之为卸载. 对于删除 Python,我们首先要知道其具体都安装了什么,实际上,在 ...