1.静态树:

目录结构:(css与js为下载的原文件夹)

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAA8CAIAAADNDYLBAAAEYklEQVR4nO2ba0/aUBjH/RRLfLPNemktY6zI3TG8u4Q5KeAMxmRGs4uZUxKEzWTZFrPouOrKTOA7zCWOmFgzJ9/BV3wNXvXlXoC0lt7k1vZwkv+L5uFw4Px6cp7T59/Tg2IIVGfUo/o/6B5B1jphnctEa0ruvnM6TKqPR8tqGetcJnqwtzU1abfZjDypPkiNSJR1IvF9GB+4FWsxqT5IjUiUtWvUQRAPUaxfmnVyd0P1MehFUqyH8QEMGxwc6pNgHdkINfcPwjRTZpgyw5RLeS+KIWT+iqlGClEMEYzoVFKsUQxBsf77fXf7B+6JsV5amPU8sSpZSb5+XBUEXUFclZ8q8YDWR3QrWdbIENrX23tHcHbnMtFxj3VzfVEJa3JujN9DrMCUKLKOPsNc5fwSEb1KhjU2LDWvj1IRm9V4lIrIgk5/e4/XZ1oB1hV5cyUe3/qI/iS9Xg9Kr9dfPqy9XPIqmdQry8+EegjTTJmOVa9zeS/qp3IxFi4dQwQiaiNrC2vZfcj6Gpn+9l4W9FEqYjbjwp34qdLNvBelq6mSocOoSESnEmUdj+/L7q+jm8tKJvXW+qLq49SCmnpuTO5uKGHteWJVfZxaEKw9QdYgCrKGrEEUZA1ZgyjIGrIGUar6jX6qpPNykjqsG/EbIeuKoN/YOdbQb+wo67b7jRx/CxhTsUHWKIa012+ssQbIVGyGdTv9RhYxOKZi46zb6zfypzMIpmKDrNvuN3LWEGBMxQZZt91v5MxrYEzFRlh3wm/sjpQoz1qJmvQbyfyVyPshYEql2lOsAPZWWkusu1KQNWQNoiBryBpEQdb6Ye1w2QLUZShxHEr+ripxHEocL8R/zcdPXBMTsg9E3aNmWdudI0Hqn+BHgWzRlzhxz8xoAHeYbrakFaabfhpoI+uFbBHFEDJ+4hwfU4ibrYowrS2PgM46mC0GqctgtkhmzgnzrU6UtmBgCljfqqaobdYs9NSp1T4CWXeCdeDHhcVG1Mc5HiNvueANrAIlTDPl61oV/1QkKhrksM4XOD/ENmZKFFlpEKseKKFjtYpNrSuds2bFPxAmwJpTqOJO0trcFAxyO7y+l+xLKdxmnBtZocw2rrl0mmH90IQHNnae7x1bbAT+yDgfL/jebBtNuDxrgSq24Lzm3Jib+bOU9woHb3TIvROCrGsNBK81w5owGwNvtwPU5fTLTaMJN5gM7tUdMnPue7VFEEZJ1oIrqRzr+qq36FFJ4Fg/9ZHkwV/P689mS/WVPgNh8rz67D84n5mbE2ctlp0kWd84FYlEadaJ5wfZ5QIg1qNuZzCy7z+8mA6EDA9Q3DhsJ1d86bMXH1LOxw4x1vzdtExu5HyXPRXJidcHZVhfJ+dabtQFaxRDXG5XcDvuS52OWEwGM+FLn4U+/RybHEOV5MbuUCtYp/5Urh0u2/jUhOHBEG4YmpydHnVX3+aBrFvD2uGy+A8vgtmiqKhigCranbd6lgFTsKYKWYMoyBqyBlH/ASXiK1yFL84hAAAAAElFTkSuQmCC" alt="" />

代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>zTree测试</title>
  7.         <link rel="stylesheet" type="text/css" href="css/demo.css" />
  8.         <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />
  9.         <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
  10.         <script src="js/jquery.ztree.all.js" type="text/javascript" charset="utf-8"></script>
  11.     </head>
  12.     <script type="text/javascript">
  13.         var setting = {
  14.             //多选框显示
  15.             check: {
  16.                 enable: true
  17.             },
  18.             data: {
  19.                 simpleData: {
  20.                     enable: true,
  21.                     idKey: "id",
  22.                     pIdKey: "pId",
  23.                     rootPId: 0
  24.                 }
  25.             },
  26.             callback: {
  27.                 onClick: zTreeOnClick,
  28.                 onCheck: zTreeOnCheck
  29.             }
  30.         };
  31.         var treeNodes = [{
  32.                 "id": 1,
  33.                 "pId": 0,
  34.                 "name": "test1"
  35.             },
  36.             {
  37.                 "id": 11,
  38.                 "pId": 1,
  39.                 "name": "test11"
  40.             },
  41.             {
  42.                 "id": 12,
  43.                 "pId": 1,
  44.                 "name": "test12"
  45.             },
  46.             {
  47.                 "id": 111,
  48.                 "pId": 11,
  49.                 "name": "test111"
  50.             }
  51.         ];
  52.  
  53.         //鼠标点击树事件
  54.         function zTreeOnClick(event, treeId, treeNode) {
  55.             alert(treeNode.id + ", " + treeNode.name);
  56.         };
  57.         //鼠标点击前面d复选框事件
  58.         function zTreeOnCheck(event, treeId, treeNode) {
  59.             //    treeNode.checked表示节点d选中状态(true|false)
  60.             alert(treeNode.id + ", " + treeNode.name + treeNode.checked);
  61.         };
  62.  
  63.         $(document).ready(function() {
  64.             $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
  65.  
  66.         });
  67.     </script>
  68.  
  69.     <body>
  70.         <div class="content_wrap">
  71.             <div class="zTreeDemoBackground left">
  72.                 <ul id="treeDemo" class="ztree"></ul>
  73.             </div>
  74.  
  75.         </div>
  76.     </body>
  77.  
  78. </html>

测试:

点击树:

点击复选框:

2.动态生成带点击事件的树

页面中准备树位置

  1.                             <div class="user_left_tree_info">
  2.                                 <div class="user_left_tree_info_title">部门</div>
  3.                                 <div class="hr"></div>
  4.                                 <div class="ztree" id="treeDemo"></div>
  5.                             </div>

Js请求树数据与生成树结构:

  1. $(function() {
  2.     alert(contextPath)
  3.     var zNodes10;
  4.     $.ajax({
  5.         url : contextPath + '/exam_getDepartmentTree.action',
  6.         async : true,
  7.         dataType : 'json',
  8.         success : function(response) {
  9.             zNodes10 = response.departmentTrees;
  10.             // 生成树结构
  11.             geneDepartmentTree(zNodes10);
  12.  
  13.         },
  14.         error : function() {
  15.             alert("查询内部部门树失败！！！")
  16.         }
  17.     });
  18.     }
  19. //生成树函数
  20. function geneDepartmentTree(departmentTrees) {
  21.     var setting = {
  22.         view : {
  23.             selectedMulti : false
  24.         },
  25.         check : {
  26.             enable : true
  27.         },
  28.         data : {
  29.             simpleData : {
  30.                 enable : true,
  31.                 enable : true,
  32.                 idKey : "departmentId",
  33.                 pIdKey : "upDepartmentId",
  34.                 rootPId : null
  35.             },
  36.             key : {
  37.                 name : "departmentName",
  38.             }
  39.         },
  40.         callback : {
  41.             onClick : zTreeOnClick
  42.         }
  43.     };
  44.     var treeNodes = departmentTrees;
  45.     $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
  46. }
  47. // 鼠标点击树事件(打印点击的id与名字)
  48. function zTreeOnClick(event, treeId, treeNode) {
  49.     alert(treeNode.departmentId + ", " + treeNode.departmentName);
  50. }

后台返回的JSON数据格式:(主要返回部门ID，上级ID，部门姓名即可构成一颗树)

  1. {"departmentTrees":[{"departmentId":"10","departmentName":"厂级-1"},{"departmentId":"10001","departmentName"
  2. :"部门1_10","upDepartmentId":"10"},{"departmentId":"10001001","departmentName":"班组1_10001","upDepartmentId"
  3. :"10001"},{"departmentId":"10002","departmentName":"部门2_10","upDepartmentId":"10"},{"departmentId":"10002001"
  4. ,"departmentName":"班组2_10002","upDepartmentId":"10002"},{"departmentId":"10003","departmentName":"部门3_10"
  5. ,"upDepartmentId":"10"},{"departmentId":"11","departmentName":"厂级-2"},{"departmentId":"11001","departmentName"
  6. :"部门1_11","upDepartmentId":"11"},{"departmentId":"12","departmentName":"厂级-3"}]}

结果:

点击树:

3.更复杂的关于树的点击事件参考:

http://www.cnblogs.com/qlqwjy/p/7309721.html

另一个例子:(带有单选按钮的树)

  1. ******S   QLQ**********************/
  2. var zTree;
  3. var setting = {
  4.      check:{
  5.             enable:true,
  6.             chkStyle :"radio",
  7.             radioType: "all"
  8.         },
  9.     data : {
  10.         key : {
  11.             name:"typeName"
  12.         },
  13.         simpleData : {
  14.             enable : true,
  15.             idKey: "typeId",
  16.             pIdKey: "upId",
  17.             rootPId: 1
  18.         }
  19.     },
  20.     callback : {
  21.         onClick : clickNode
  22.     //点击节点触发的事件
  23.     }
  24. };
  25. function geneTypeTree(){
  26.     $.getJSON(contextPath+"/trainacontentType_getTraincontenttypeTree.action",function(response){
  27.         var zNodes = response.traincontenttypeTree;
  28.         zTree = $.fn.zTree.init($("#tree"),setting,zNodes);
  29.     });
  30. }
  31.  
  32. /************S   点击事件*********/
  33. function clickNode(e, treeId,treeNode) {
  34.     $("#trainContentTypeId").val(treeNode.typeId);//向隐藏的类别编号赋值
  35.     $("[name='typeId']").val(treeNode.typeId);//向隐藏的类别编号赋值
  36.     $("#yeHao").val("1");
  37.     btnFindFy();
  38. }
  39. /************E   点击事件*********/
  40.  
  41. function openModal(){
  42.     $("#el_empTrainDoc").modal("show");
  43. }
  44.  
  45. /******E   QLQ**********************/

【zTree】zTree的3.5.26静态树与动态树(实用)的更多相关文章

  1. zTree静态树与动态树的用法——（七）

    0.[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实 ...

  2. luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)

    link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法 我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲 再维护一个bel,由于一个颜色相同的段一定是一 ...

  3. 点分治Day2 动态树分治

    蒟蒻Ez3real冬令营爆炸之后滚回来更新blog... 我们看一道题 bzoj3924 ZJOI2015D1T1 幻想乡战略游戏 给一棵$n$个点的树$(n \leqslant 150000)$ 点 ...

  4. 可持久化线段树（主席树）——静态区间第k大

    主席树基本操作:静态区间第k大 #include<bits/stdc++.h> using namespace std; typedef long long LL; ,MAXN=2e5+, ...

  5. Trie树（字典树）（1）

    Trie树.又称字典树,单词查找树或者前缀树,是一种用于高速检索的多叉树结构. Trie树与二叉搜索树不同,键不是直接保存在节点中,而是由节点在树中的位置决定. 一个节点的全部子孙都有同样的前缀(pr ...

  6. wpf 逻辑树与可视化树

    XAML天生就是用来呈现用户界面的,这是由于它具有层次化的特性.在WPF中,用户界面由一个对象树构建而成,这棵树叫作逻辑树.逻辑树的概念很直观,但是为什么要关注它呢?因为几乎WPF的每一方面(属性.事 ...

  7. 浅谈算法和数据结构: 十 平衡查找树之B树

    前面讲解了平衡查找树中的2-3树以及其实现红黑树.2-3树种,一个节点最多有2个key,而红黑树则使用染色的方式来标识这两个key. 维基百科对B树的定义为“在计算机科学中,B树(B-tree)是一种 ...

  8. 动态树之LCT(link-cut tree)讲解

    动态树是一类要求维护森林的连通性的题的总称,这类问题要求维护某个点到根的某些数据,支持树的切分,合并,以及对子树的某些操作.其中解决这一问题的某些简化版(不包括对子树的操作)的基础数据结构就是LCT( ...

  9. 从B 树、B+ 树、B* 树谈到R 树

    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

随机推荐

  1. rxjs5.X系列 —— ErrorHandling/Condition/Mathematical系列 api 笔记

    欢迎指导与讨论 : ) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第四篇 —— ErrorHanding异常处理.Condition Operator情况操作.Ma ...

  2. 转载-C++ vector 用法

    转自:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总结. ...

  3. 【vim】vim常用命令

    移动: h 或 向左箭头键(←)  #光标向左移劢一个字符 j 或 下箭头键(↓)    #光标向下移劢一个字符 k 或 向上箭头键(↑)    #光标向上移劢一个字符 l 或 向右箭头键(→)    ...

  4. 转--- 秒杀多线程第六篇 经典线程同步 事件Event

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇 一个经典的多线程同步问题> <秒杀多线程第五篇 经典线程同步关键段CS> 上一篇中使用关键段来解决经典的多线程同步互斥问题 ...

  5. varnish启动报错

    错误1.Starting Varnish Cache: Error: Cannot open socket: :80: Address family not supported by protocol ...

  6. static变量的特点 - 只会有一份成员对象

    1.   public class HasStatic{ 2.     private static int x=100; 3.     public static void main(String ...

  7. Doves and bombs UVA - 10765（统计割顶所连接的连通块的数量）

    题意:给定一个n个点的连通的无向图,一个点的“鸽子值”定义为将它从图中删去后连通块的个数. 求对应的点 和 每个点的“鸽子值” 用一个数组在判断割顶的那个地方 累加标记一下所连接的连通块的数量即可 初 ...

  8. TortoiseSVN 和 VisualSVN Server 使用教程

    TortoiseSVN 和 VisualSVN Server 使用教程 来源 https://blog.csdn.net/xgf415/article/details/75196360 目录: SVN ...

  9. hive 导入数据

    1.load data load data local inpath "/home/hadoop/userinfo.txt" into table userinfo; " ...

  10. XML格式化加载的时候提示Content is not allowed in prolog. Nested exception: Content is not allowed in prolog

    原因:原本是.xml文件格式的内容,被你用右键,文本编辑,保存,导致格式不认了. 解决方法:下载个notepad+ 工具,用这工具打开,修改,编辑,保存,即可被继续认作xml格式.