zTree简介

    项目中用到了zTree树来显示组织单位，功能还算可以，这里把知道的知识简单的记录一下。

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
    zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。zTree v3.0    1.将核心代码按照功能进行了分割，不需要的代码可以不用加载

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

核心：zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。


核心参数：setting

zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置
setting 举例:
var setting = { 
showLine: true, 
checkable: true 
}; 
因为参数太多，具体参数详见zTreeAPI
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式
1 带有父子关系的标准 zTreeNodes 举例:

		var setting = {	};

		var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠",
						children: [
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
						]},
					{ name:"父节点12 - 折叠",
						children: [
							{ name:"叶子节点121"},
							{ name:"叶子节点122"},
							{ name:"叶子节点123"},
							{ name:"叶子节点124"}
						]},
					{ name:"父节点13 - 没有子节点", isParent:true}
				]},
			{ name:"父节点2 - 折叠",
				children: [
					{ name:"父节点21 - 展开", open:true,
						children: [
							{ name:"叶子节点211"},
							{ name:"叶子节点212"},
							{ name:"叶子节点213"},
							{ name:"叶子节点214"}
						]},
					{ name:"父节点22 - 折叠",
						children: [
							{ name:"叶子节点221"},
							{ name:"叶子节点222"},
							{ name:"叶子节点223"},
							{ name:"叶子节点224"}
						]},
					{ name:"父节点23 - 折叠",
						children: [
							{ name:"叶子节点231"},
							{ name:"叶子节点232"},
							{ name:"叶子节点233"},
							{ name:"叶子节点234"}
						]}
				]},
			{ name:"父节点3 - 没有子节点", isParent:true}

		];

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

效果图如下：

 

项目中就是用的zTree这个简单的实现方式，上面的例子也可以在zTree官网上可以看到，功能和样式还不错，推荐大家可以看一下。