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

一个最简单的树形结构。

 

案例：zTree 最简单的树

 

效果图：





 1 <!DOCTYPE html> 
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>zTree 最简单的树</title>
 6         
 7         <link rel="stylesheet" type="text/css" href="../trd/zTree_v3-master/zTree_v3-master/css/zTreeStyle/zTreeStyle.css"/>
 8         
 9         <script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
10         <script type="text/javascript" src="../trd/zTree_v3-master/zTree_v3-master/js/jquery.ztree.core.js"></script>
11         
12         <script type="text/javascript">
13             var zTree;
14             var setting = {
15                 view: {
16                     dblClickExpand: false,
17                     showLine: true,
18                     selectedMulti: false
19                 },
20                 data: {
21                     simpleData: {
22                         enable:true,
23                         idKey: "id",
24                         pIdKey: "pId",
25                         rootPId: ""
26                     }
27                 },
28                 callback: {
29                     beforeClick: function(treeId, treeNode) {
30                         var zTree = $.fn.zTree.getZTreeObj("tree");
31                         if (treeNode.isParent) {
32                             zTree.expandNode(treeNode);
33                             return false;
34                         } else {
35                             return true;
36                         }
37                     }
38                 }
39             };
40             
41             var zNodes =[
42                 {id:1, pId:0, name:"水果", open:true},
43                 {id:101, pId:1, name:"苹果"},
44                 {id:102, pId:1, name:"香蕉"},
45                 {id:103, pId:1, name:"梨"},
46                 {id:10101, pId:101, name:"红富士苹果"},
47                 {id:10102, pId:101, name:"红星苹果"},            
48                 {id:10103, pId:101, name:"嘎拉"},
49                 {id:10104, pId:101, name:"桑萨"},
50                 {id:10201, pId:102, name:"千层蕉"},
51                 {id:10202, pId:102, name:"仙人蕉"},
52                 {id:10203, pId:102, name:"吕宋蕉"},
53             ];
54             
55             $(document).ready(function(){
56                 var t = $("#tree");
57                 
58                 /**
59                  * zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)
60                  * t:用于展现 zTree 的 DOM 容器
61                  * setting:zTree 的配置数据
62                  * zNodes:zTree 的节点数据
63                  * 
64                  */
65                 
66                 t = $.fn.zTree.init(t, setting, zNodes);
67             });
68         </script>
69         
70     </head>
71     <body>
72         
73         <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
74         
75     </body>
76 </html>




 


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


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