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

一个最简单的树形结构。

案例：zTree 最简单的树

效果图：





 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>zTree 最简单的树</title>

         <link rel="stylesheet" type="text/css" href="../trd/zTree_v3-master/zTree_v3-master/css/zTreeStyle/zTreeStyle.css"/>

         <script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery-1.4.4.min.js"></script>

         <script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery.ztree.core.js"></script>

         <script type="text/javascript">

             var zTree;

             var setting = {

                 view: {

                     dblClickExpand: false,

                     showLine: true,

                     selectedMulti: false

                 },

                 data: {

                     simpleData: {

                         enable:true,

                         idKey: "id",

                         pIdKey: "pId",

                         rootPId: ""

                     }

                 },

                 callback: {

                     beforeClick: function(treeId, treeNode) {

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

                         if (treeNode.isParent) {

                             zTree.expandNode(treeNode);

                             return false;

                         } else {

                             return true;

                         }

                     }

                 }

             };

             var zNodes =[

                 {id:1, pId:0, name:"水果", open:true},

                 {id:101, pId:1, name:"苹果"},

                 {id:102, pId:1, name:"香蕉"},

                 {id:103, pId:1, name:"梨"},

                 {id:10101, pId:101, name:"红富士苹果"},

                 {id:10102, pId:101, name:"红星苹果"},

                 {id:10103, pId:101, name:"嘎拉"},

                 {id:10104, pId:101, name:"桑萨"},

                 {id:10201, pId:102, name:"千层蕉"},

                 {id:10202, pId:102, name:"仙人蕉"},

                 {id:10203, pId:102, name:"吕宋蕉"},

             ];

             $(document).ready(function(){

                 var t = $("#tree");

                 /**

                  * zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)

                  * t:用于展现 zTree 的 DOM 容器

                  * setting:zTree 的配置数据

                  * zNodes:zTree 的节点数据

                  *

                  */

                 t = $.fn.zTree.init(t, setting, zNodes);

             });

         </script>

     </head>

     <body>

         <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>

     </body>

 </html>




这是我自己从网上下载下来的一个zTree的版本，如果有需要，可以访问下面的链接进行下载。


zTree下载地址：http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip
												


											
zTree入门-最简单的树的更多相关文章
	

    
								
  1. （1-1）入门—最简单的树（使用json数据）
		
    1.<!DOCTYPE html>是必须的. 2.zTree 的容器 className 别忘了设置为 "ztree". 使用ztree创建树,首先要引用ztree相关 ...
    
		
    2. 
						
  2. 线段树简单入门 (含普通线段树, zkw线段树, 主席树)
		
    线段树简单入门 递归版线段树 线段树的定义 线段树, 顾名思义, 就是每个节点表示一个区间. 线段树通常维护一些区间的值, 例如区间和. 比如, 上图 \([2, 5]\) 区间的和, 为以下区间的和 ...
    
		
    3. 
						
  3. ztree入门
		
    ztree入门 ztree可用于权限管理,机构部门等有层次的数据 准备工作 ztree官网 点击右上角的GitHub或者码云的地址将demo下载到本地 在本地新建一个项目,将下载的文件中zTreeSt ...
    
		
    4. 
						
  4. 踢爆IT劣书出版黑幕——由清华大学出版社之《C语言入门很简单》想到的（1）
		
    1.前言与作者 首先声明,我是由于非常偶然的机会获得<C语言入门很简单>这本书的,绝对不是买的.买这种书实在丢不起那人. 去年这书刚出版时,在CU论坛举行试读推广,我当时随口说了几句(没说 ...
    
		
    5. 
						
  5. [电子书] 《Android编程入门很简单》
		
    <Android编程入门很简单>是一本与众不同的Android学习读物,是一本化繁为简,把抽象问题具体化,把复杂问题简单化的书.本书避免出现云山雾罩.晦涩难懂的讲解,代之以轻松活泼.由浅入 ...
    
		
    6. 
						
  6. html结合js实现简单的树状目录
		
    最近在学jsp,期末了要做项目,需要用到树状目录,百度了很多,都没有找到想要的答案,最后自己折腾了半天,才搞定. 下面我就来分享一下怎么实现一个简单的树状目录: 1. 下载jquery-treevie ...
    
		
    7. 
						
  7. Redis入门很简单之六【Jedis常见操作】
		
    Redis入门很简单之六[Jedis常见操作] http://www.tuicool.com/articles/vaqABb http://www.cnblogs.com/stephen-liu74/ ...
    
		
    8. 
						
  8. 《Mysql 入门很简单》（读后感①）
		
    下载完整版<Mysql 入门很简单>,点击这里~: http://files.cnblogs.com/files/zhengyeye/MySQL%E5%85%A5%E9%97%A8%E5% ...
    
		
    9. 
						
  9. Hibernate入门2.简单的项目开发实例
		
    Hibernate入门2.简单的项目开发实例 这一节通过一个简单的项目学习Hibernate项目的配置 代码下载 : 链接: http://pan.baidu.com/s/1zlgjl 密码: p34 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JAVA源码走读（一） HashMap与ArrayList
			
    HashMap 一.HashMap基本概念: HashMap是基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒 ...
    
			
    2. 
						
  2. tornado api 简单模板
			
    # 安装 pip insatll tornado # 主文件 web_server.py #!/usr/bin/env python # encoding: utf-8 import tornado. ...
    
			
    3. 
						
  3. Kafka深度解析，众人推荐，精彩好文！
			
    作者: Jason Guo 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,并保证即使对TB级以上数据 ...
    
			
    4. 
						
  4. Json序列化,date类型转换后前端显示错误的解决方案
			
    1.前台使用Jquery解决 (1)如果我们前台使用Jquery来解决这个问题的话,那么我们首先想到的是我们如何解析这个过程呢,当然我们就想到了自己写一个JavaScript脚本来解析这个过程,当然这 ...
    
			
    5. 
						
  5. Balloons（山东省第一届ACM省赛）
			
    Balloons Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 Both Saya and Kudo like balloons ...
    
			
    6. 
						
  6. SOLID rule in JAVA design.
			
    Classes are the building blocks of your java application. If these blocks are not strong, your build ...
    
			
    7. 
						
  7. Genymotion出现virtualbox cannot start the virtual device错误
			
    选择你要启动的device右侧的设置 打开如下界面 将Processor设置为1 (默认为4)
    
			
    8. 
						
  8. 搭建fedora开发环境 common lisp, c++, go
			
    第三方软件库: http://download1.rpmfusion.org/free/fedora/releases/25/Everything/x86_64/os/repoview/index.h ...
    
			
    9. 
						
  9. webstorm编辑RN代码提示功能
			
    需要下载一个文件. 1. 进入你想存储这个文件的目录,按住shift+鼠标右键,选择“在此处打开命令窗口” 2. 在命令窗口中输入  git clone https://github.com/virt ...
    
			
    10. 
						
  10. 批量插入数据(基于Mybatis的实现-Oracle)
			
    前言:做一个数据同步项目,要求:同步数据不丢失的情况下,提高插入性能. 项目DB框架:Mybatis.DataBase:Oracle. -------------------------------- ...
    
			
    11.