最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件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. npoi上传xlsx文件，并读取数据
			
    视图 public PartialViewResult UploadIndex() { return PartialView(); } <div> <fieldset style=& ...
    
			
    2. 
						
  2. Windows服务器上使用bat定时执行php
			
    windows上和linux上有一个类似的cmd和bat文件,bat文件类似于shell文件,执行这个bat文件,就相当于依次执行里面的命令(当然,还可以通过逻辑来实现编程),所以,我们可以利用bat ...
    
			
    3. 
						
  3. 在线开发工具helper
			
    发现一个很有用的在线工具大全:http://tool.lu/ 同时,欢迎查看新开i云轩工作室: logo在线制作:http://www.uugai.com/
    
			
    4. 
						
  4. Maven构建项目后项目报Error错误Java compiler level does not match the version of the installed Java project fac
			
    项目->右键->Project Facets->修改facets中Java版本(下拉箭头出)为要用的版本 Maven构建项目需注意 1.项目右键->Preferences-&g ...
    
			
    5. 
						
  5. opendove中的odgw所需要的内核模块
			
    最近组里要做opendove相关的东西,需要odgw的一个kernel-module. 以前安装过,但备份不见了,在此做个链接备忘 : https://git.opendaylight.org/ger ...
    
			
    6. 
						
  6. leetcode174. Dungeon Game
			
    // learn from https://discuss.leetcode.com/topic/6912/c-dp-solution ''' class Solution { public: int ...
    
			
    7. 
						
  7. MacBook下如何安装mysql-python
			
    解决方法: 先把之前装的卸载干净:pip uninstall mysql-pythonbrew uninstall mysql-connector-c 现在设置下mysql_config路径:首先修改 ...
    
			
    8. 
						
  8. OpenLayers Map理解
			
    1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...
    
			
    9. 
						
  9. spring代理模式 service远程调用，插件执行
			
    最近,研究了一下平台远程调用的过程,和service层插件执行的原理,记录一下. 1.远程service调用过程 首先看一下类的继承结构 封装调用处理过程 封装service调用接口 封装servic ...
    
			
    10. 
						
  10. Fiddler测试WebApi的Post方法报错
			
    标题头要加 Content-Type: application/json,Request Body中写json数组.
    
			
    11.