最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件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. MVC4 +EasyUI 使用TreeGrid 方法
			
    用easyui已经有2年了,换了新环境,要求用mvc开发,所以想把原来的项目直接用mvc重构. 在使用TreeGird的时候出现了问题,发现在转换为treegrid的json 很费劲,一直都是用的ea ...
    
			
    2. 
						
  2. sql server 替换特殊符号
			
    --create-- 去掉特殊符号alter function RepSymbol(@str nvarchar(max))returns nvarchar(max)as begin set @str= ...
    
			
    3. 
						
  3. shared_ptr 线程安全
			
    Then what's really happening is TWO different sections of memory are being allocated. It's done at o ...
    
			
    4. 
						
  4. JAVA使用堆外内存导致swap飙高
			
    https://github.com/nereuschen/blog/issues/29 堆内内存分析一般用Memory Analyzer Tool http://tivan.iteye.com/bl ...
    
			
    5. 
						
  5. mybatis处理一对多的查询
			
    //查询出某个班级对应的所有老师和学生 1.使用嵌套结果 <select id="findClasses3" parameterType="int" re ...
    
			
    6. 
						
  6. LeetCode 397. Integer Replacement
			
    397. Integer Replacement QuestionEditorial Solution My Submissions   Total Accepted: 5878 Total Subm ...
    
			
    7. 
						
  7. ./upload/forum.php
			
    这是forum.php的全部代码,然后试着读一读,自己做做笔记. define('APPTYPEID', 2); define('CURSCRIPT', 'forum'); define(); 定义常 ...
    
			
    8. 
						
  8. 在Win2008上运行ASP.NET 1.1程序
			
    在之前的文章<将Web站点由IIS6迁移至IIS7>中已经提到了关于在Win2008下运行ASP.NET 1.1程序的问题,但还不够完整,因此在这里重新整理一下. 1.要安装.net fr ...
    
			
    9. 
						
  9. 1不等于1？numeric、decimal、float 和 real 数据类型的区别
			
    大家有没有在SQL中遇见1不等于1(1<>1)的情形!?下面会有一个例子演示这个情形. 先简单介绍一下标题中的四种数值数据类型. 在T-SQL中,numeric和decimal是精确数值数 ...
    
			
    10. 
						
  10. QTP处理各类鼠标事件fireEvent
			
    在做web测试时,页面上的HTML标签会包含各类事件:单击(onclick).双击(onDblClick).光标聚集(OnBlur).onchange.onfocus.onmousedown.onmo ...
    
			
    11.