zTree介绍

前言

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

一、zTree优点

1. zTree v3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载
2. 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容IE、FireFox、Chrome、Opera、Safari 等浏览器
3. 支持 JSON 数据
4. 支持静态 和 Ajax 异步加载节点数据
5. 支持任意更换皮肤 / 自定义图标（依靠css）
6. 支持极其灵活的 checkbox 或 radio 选择功能
7. 提供多种事件响应回调
8. 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
9. 在一个页面内可同时生成多个 Tree 实例
10. 简单的参数配置实现 灵活多变的功能

zTree官网:
针对于zTree的介绍和优点,可以在官网上具体查询,这里属于摘要

二、基本使用

1.思路分析

步骤：

//1 观察整体页面结构
//2 去除无效的基础信息
//3 去除页面无效的基础信息
//4 分析页面js内容
//5 分页结构所使用的的数据
//6 简化页面内容书写

2.参考资料

图片如下：

3.简单设计

4.代码设计

    <meta charset="UTF-8">
    <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-3.5.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>
	<SCRIPT>
		var setting = {
		 check: {//显示方框
            enable: true
          },
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"深圳总公司",open:true},
			{ id:11, pId:1, name:"研发部门"},
			{ id:12, pId:1, name:"市场部门",checked:true},
			{ id:13, pId:1, name:"测试部门"},
			{ id:14, pId:1, name:"财务部门"},
			{ id:15, pId:1, name:"运维部门"},
			
			{ id:2, pId:0, name:"长沙分公司",open:true},
			{ id:21, pId:2, name:"市场部门"},
			{ id:22, pId:2, name:""},
			
			{ id:3, pId:0, name:"日志管理",open:true},
			{ id:31, pId:3, name:"操作日志"},
			{ id:32, pId:3, name:"登录日志"},
		];
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</SCRIPT>
		<ul id="treeDemo" class="ztree"></ul>
	

总结

在设计树形结构图时,留下主要的,去除次要的,需要较好的掌握js和jQuery,细节方面也需要多多注意,此页面设计目前只是展示假数据,真实数据需要进行前后端交互等等