最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件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="260px; overflow:auto;"></ul> 74 75 </body> 76 </html>
这是我自己从网上下载下来的一个zTree的版本，如果有需要，可以访问下面的链接进行下载。
zTree下载地址：http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip