ztree带有选项框的树形菜单使用

1.ztree简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。在开源的作用下，zTree 越来越完善，目前已经拥有了不少粉丝，并且今后还会推出更多的 zTree 扩展功能库，让 zTree 更加强大。

2.ztree入门

　　步骤 1、文件准备

　　　　将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确

　　步骤 2、编写 html 页面

　　　　按照以下代码，制作 html 页面，访问试试看吧，注意：
　　1) "<!DOCTYPE html>" 是必需的！
　　2) zTree 的容器 className 别忘了设置为 "ztree"

 1 <!DOCTYPE html>
 2 <HTML>
 3  <HEAD>
 4   <TITLE> ZTREE DEMO </TITLE>
 5   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6   <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
 7   <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
 8   <script type="text/javascript" src="jquery-1.4.2.js"></script>
 9   <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
10   <SCRIPT LANGUAGE="JavaScript">
11    var zTreeObj;
12    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
13    var setting = {};
14    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
15    var zNodes = [
16    {name:"test1", open:true, children:[
17       {name:"test1_1"}, {name:"test1_2"}]},
18    {name:"test2", open:true, children:[
19       {name:"test2_1"}, {name:"test2_2"}]}
20    ];
21    $(document).ready(function(){
22       zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
23    });
24   </SCRIPT>
25  </HEAD>
26 <BODY>
27 <div>
28    <ul id="treeDemo" class="ztree"></ul>
29 </div>
30 </BODY>
31 </HTML>

View Code