入手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里有这个方法，可看介绍

（楼主有点累，明天继续，我继续去练习了，不要急我会回来的，啊哈哈哈哈！！！！）

猜你喜欢