什么是zTree
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件(MIT 许可证)。
“树插件”长下面这个样子：
如何使用zTree
在使用zTree之前我们首先需要引入jquery的依赖。
上面三个引入分别是zTree css样式 jQuery依赖 zTree核心依赖
接着我们就可以开始编写树形菜单了
定义一个简单的树
我们新建一个HTML 在里面定义一个div
这里的id属性可以随意定义 后面会根据这个id值进行DOM节点的查找，class 定义成ztree是为了使用ztree 的css 样式。
DOM节点定义好了，我们就要开始写JavaScript了，我们先看看代码。
var zTreeObj;
var setting = {};
var zNodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]
}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});我们先从第一行开始解读，首先申明了三个变量，都是局部变量 分别是zTreeObj seeting zNodes，zTreeObj 则是用来存放树形菜单实例的，seeting 用来存放对树菜单的设置，则zNodes里面存放的是JSON数组。
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});上面的函数则表示，进行初始化，实例化一个树形菜单出来，将菜单代码放入到id为tree的DOM元素种。
jQuery查找DOM元素$("#tree") //通过Id属性查找 id为tree的元素
$(".tree")//通过class属性查找 class为tree的元素上面的代码会产生什么样的效果呢？
没错 页面产生一个树形菜单
解读zNodes属性
今天就一个任务，解读zNodes属性。
var zNodes = [
{name: "父节点1", children: [
{name: "子节点1"},
{name: "子节点2"}
]
}
];zNodes里存放的是JSON数组，里面的每一个JSON对象都是一个树的节点。
先看一个简单的JSON数据var zNodes = [
{name: "根节点1"},
{name: "根节点2"},
{name: "根节点3"},
{name: "根节点4"},
];定义了4个菜单节点，name字段则是菜单的名字，是个根节点，通俗易懂点就是他的下面没有菜单。
那么如何强制让他成为父节点呢？类似下面这样呢
需要注意：当前的父节点已经是打开的状态，但是下面没有子节点。因为我们给他加入一个属性
isParent: truevar zNodes = [
{name: "父节点", isParent: true},
{name: "根节点2"},
{name: "根节点3"},
{name: "根节点4"},
];在构建树形菜单的时候，即使没有子节点，或者说它不是父节点 我们使用isParent: true强制让它成为父节点。
正儿八经的父节点又是什么样的的呢？
var zNodes = [
{name: "假父节点", isParent: true},
{name: "真父节点",children:[
{"name":"真子节点1"},
{"name":"真子节点2"},
{"name":"真子节点3"}
]},
{name: "根节点3"},
{name: "根节点4"},
];相信大家已经看出来了，给某一个菜单加入children:[]属性就可以了 children:[]里面的内容和外面是一样的菜单名称。这就是真父节点和假父节点的区别，虽然我们这样写出来的菜单，默认都是闭合的没有展开子菜单，如果想要默认展开下面的子菜单只需要加一个属性即可。var zNodes = [
{name: "假父节点", isParent: true},
{name: "真父节点", open:true, children:[
{"name":"真子节点1"},
{"name":"真子节点2"},
{"name":"真子节点3"}
]},
{name: "根节点3"},
{name: "根节点4"},
];
添加 open:true 即可。暂时就了解这么多后我面我们再继续。
