java菜鳥篇<四> ZTree入門篇

今天准備入手ZTree，於是在百度上搜了搜，找到了開源網址和一些大神們的教程，於是乎下午開始了組織樹（ZTree）的練習

 

初步完整的作品是這個樣子的：

 

1、咱們要去這個工具的開源網里找下載的東西：

（1）這邊賞你們地址，雖然我知道地址真的很好找：http://www.treejs.cn/v3/main.php#_zTreeInfo

（2）在這個地址里邊我們要下載一些東西啦！！！因為我是菜鳥，所以我盡可能詳細的截圖，這樣方便跟我一樣是小菜鳥的孩子們看哈。。。

點擊下載：

下載標明的文件：

其實只用到了后三個，反正當時不知道，我就全部下了

 

在eclipse中開始添加項目了

 

 

2、下面就開始寫第一個屬於我們自己的關於組織樹的頁面咯！！！

我在這個文件夾下新添一個頁面哦

（1）、第一步引入jquery和css

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>

 

(2)第二步就是寫組織樹模型，固定格式：

<ul id="treeDemo" class="ztree"></ul>

比我更菜的不知道這個放在哪里的不要急，我待會告訴你們哈！！！

 

（3）第三步初始化你的組織樹，就是打開頁面后這個組織樹就出來了

$(document).ready(function(){
    zTreeObj=$.fn.zTree.init($("#treeDemo"),setting,zNodes);    
});

在組織樹官方網站的API里有這個方法，可看介紹

（樓主有點累，明天繼續，我繼續去練習了，不要急我會回來的，啊哈哈哈哈！！！！）