最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件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. 一个人独立开发 3D 游戏引擎可能吗？
			
    作者:孙志超链接:https://www.zhihu.com/question/24733255/answer/42000966来源:知乎著作权归作者所有,转载请联系作者获得授权. 当然可以,但难道有 ...
    
			
    2. 
						
  2. 转I2s
			
    转自http://blog.csdn.net/ce123/article/details/6919954 I2S音频总线学习(二)I2S总线协议 一.I2S总线概述 音响数据的采集.处理和传输是多媒体 ...
    
			
    3. 
						
  3. css3画三角形的原理
			
    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
    
			
    4. 
						
  4. 2016年第七届蓝桥杯C/C++程序设计本科B组决赛
			
    2.答案300 刁丝卫代码,比赛时long long写成int,结果成了263...一等擦肩而过... #include <iostream> #include <fstream&g ...
    
			
    5. 
						
  5. 导出DBF，并且提供下载 [转]
			
    导出DBF,并且提供下载 #region Declare string mFilePath = MapPath("../DataTmp/");                str ...
    
			
    6. 
						
  6. 仅个人兴趣，自己通过搜索他人的成果，结合自己的理解，来分析discuz的代码。
			
    仅个人兴趣,自己通过搜索他人的成果,结合自己的理解,来分析discuz的代码. discuz 版本: 3.2
    
			
    7. 
						
  7. LCA
			
    2016.1.28 LCA,就是最近公共祖先,这里介绍倍增的算法. 首先我们要预处理,设f[i][j]为编号为i的节点的2j级祖先,所谓2j级祖先,就是从i节点开始往树的上层数2j个节点.如下图所示  ...
    
			
    8. 
						
  8. php删除目录下的所有文件和目录
			
    <?php /** * 递归实现删除目录下的所有的文件和文件夹 * @param $dir 要删除的目录 * @param bool $deleteRootToo 是否删除根目录 默认不删除 h ...
    
			
    9. 
						
  9. bottlepy template
			
    bottle template usage 1 example 使用bottle模板,最简单的方法是使用template函数或view装饰器 1.1 template 函数 例子如下: from bo ...
    
			
    10. 
						
  10. ps基础知识
			
    一 1. ps常用快捷键:ctrl+d 结束选区    ctrl+alt+z  返回          ctrl+z 撤销           ctrl+x 剪切 ctrl+t 编辑图片    ctr ...
    
			
    11.