Jquery树插件zTree入门教程

关于zTree的介绍就搜吧。

这个例子的最终效果如下：

鼠标移动到一级目录时出现全选链接，点击全选链接该目录下的所有子项都被添加到收件人的文本框中，当然点击单个子项则添加一个。至于要添加些什么信息由自己决定。

1，下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的js和css

 

1. <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

2. <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>

3. <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>

4. <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>

5. <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

6.  

7. jquery.ztree.core-3.5.js：zTree核心包

8.  

9. jquery.ztree.excheck-3.5.js：复选框功能包

10.  

11. jquery.ztree.exedit-3.5.js：编辑功能包

 

 

zTree核心包是必须引入的。

 

2，配置zTree，个别说明见代码中的注释

 

zTree设置信息：

变量：zTree中用到的html标签ID都会在后面添加以下后缀，如一级目录前面的展开和关闭图片的id为添加IDMark_Switch，其他的摸索吧。

 

1. var IDMark_Switch = "_switch",

2. IDMark_Icon = "_ico",

3. IDMark_Span = "_span",

4. IDMark_Input = "_input",

5. IDMark_Check = "_check",

6. IDMark_Edit = "_edit",

7. IDMark_Remove = "_remove",

8. IDMark_Ul = "_ul&