最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件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. AMap编辑折线、多边形、圆
			
    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
    
			
    2. 
						
  2. 解决java compiler level does not match the version of the installed java project facet
			
    在项目目录的.setting文件夹下的org.eclipse.wst.common.project.facet.core.xml中 <installed facet="java&quo ...
    
			
    3. 
						
  3. 【HOW】如何限制Reporting Services报表导出功能中格式选项
			
    Reporting Services报表导出功能中缺省会提供多种导出格式选项,但很多情况下不需要全部的格式选项,因此需要对这些选项进行限制.下面我们以SQL Server 2008 R2为例来说明对这 ...
    
			
    4. 
						
  4. [转载]反无人机企业DroneShield利用声音识别侦测无人机
			
    原文:http://www.cnbeta.com/articles/495071.htm 无人机产业正在蓬勃发展,受益的不仅仅是那些生产小型飞行设备的企业.专家估计仅在澳大利亚就有5万架商用无人机以及 ...
    
			
    5. 
						
  5. (转)C# 打印PDF文件使用第三方DLL
			
    本文为转载,原文:http://www.cnblogs.com/Yesi/p/5066835.html DLL地址:https://freepdf.codeplex.com 下面是该解决方案的详细代码 ...
    
			
    6. 
						
  6. FreeBSD从零开始---安装后配置（一）
			
    一.安装后配置   上次我们说到FreeBSD的安装,这次我们说FreeBSD安装后的配置和简单优化方法.   安装完BSD只是服务器提供服务这条万里长征路的开始,还需要一些基本的设定和优化.不过实际 ...
    
			
    7. 
						
  7. WIN7无法记住远程登录密码
			
    1.单点win7系统开始菜单——“运行”,然后输入“gpedit.msc”确定: 2.打开本地组策略后,依次展开:计算机配置 > 管理模板 > 系统 > 凭据分配: 3.双击右侧列表 ...
    
			
    8. 
						
  8. win7远程桌面恢复全屏状态快捷键
			
    不同的电脑可能有不同的快捷键(有些笔记本电脑甚至没有相应的键值):①台式机:ctrl+alt+break 组合键.②CTRL+ALT+PAGEDOWN 组合键.③有的笔记本没有break键,可以尝试加 ...
    
			
    9. 
						
  9. LoadRunner测试结果分析03 转载至zhangzhe的新浪博客
			
    LoadRunner测试结果分析之我见 前面分析的Web Resource(网络资源)的测试情况,其主要关注的是服务器性能,而系统本身和环境都有可能存在问题,页面诊断(Web Page Diagnos ...
    
			
    10. 
						
  10. Hive修改表
			
    Alter Table 语句 它是在Hive中用来修改的表. 语法 声明接受任意属性,我们希望在一个表中修改以下语法. ALTER TABLE name RENAME TO new_name ALTE ...
    
			
    11.