zTree入門-最簡單的樹

本文轉載自查看原文 2016-05-28 11:58 17159 最簡單的樹/ zTree入門/ ztree

　　最近發現項目中很多地方都是樹形菜單，而這些樹形菜單都是使用樹形插件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下載地址：http://files.cnblogs.com/files/zuidongfeng/zTree_v3-master.zip

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Java簡單ztree樹 jquery 插件ztree的應用------簡單的樹（tree） [機器學習]-決策樹-最簡單的入門實戰例子樹結構數據的展示和編輯-zTree樹插件的簡單使用 vuex最簡單、最詳細的入門文檔 Hadoop最簡單入門實戰最簡單入門深度學習 nodejs入門最簡單例子樹插件 ztree 的基本用法 ztree樹樣式的設計