简介
zTree 是一个依托 jQuery 完成的多功能 “树插件”。
网址：http://www.ztree.me/v3/main.p…
上面的网址里有ztree的细致引见、Demo 演示、API 文档、入门指南 以及下载。
这里不再赘述。
运用说明
1、下载ztree文件
将须要运用的 zTree v3.x 相干的 js、css、img 文件离别安排到响应目次，而且保证相对路径准确。
2、引入ztree文件
将下载的ztree文件保存须要用的相干的 js、css、img 文件全部复制到本身的项目响应的文件夹下，如下图，我习气将这类插件一致放在common/plugin/下，（其他不须要用的文件能够删除。
3、html 页面
离别在<head>和<body>中引入css、js文件，如代码所示。
根据以下代码，制造 html 页面，注重：
zTree 的容器 className 别忘了设置为 “ztree“！！！
示例代码
- html代码：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ztreeDemo</title>
<link rel="stylesheet" href="../../../common/plugin/ztree/zTreeStyle.css" type="text/css">
</head>
<body>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10">
<div class="well sidebar-nav ">
<ul id="planTree" class="ztree"></ul>
</div>
</div>
<!-- zTree 这里运用的 all.js = core + excheck + exedit ( 不包括 exhide )-->
<script src="../../../common/plugin/ztree/jquery.ztree.all.min.js"></script>
<!--my zTree 这里引入的是下面所示的js代码文件 -->
<script src ="../../../common/js-data/mytree.js"></script>
</body>
</html>- js代码：
（这些代码，我写在了按习气的响应页面html同名的.js文件中，在<body>引入的ztree.all.min.js之下，将该文件引入页面即可。）
$(function () {
init();
});
function init() {
builePlanTree();
}
//ZTREE
function builePlanTree() {
var setting = {
view: {
showIcon: true//设置 zTree 是不是显现节点的图标。
},
data: {
simpleData: {
enable: true
}
},
callback: {
// beforeExpand: beforeExpand,
// onExpand: onExpand,
onClick: zTreeOnClick
}
}
var zNodes =[
{ id:1, pId:0, name:"课程目次", open:true},
{ id:11, pId:1, name:"季度产物学问课程", open:true},
{ id:111, pId:11, name:"13Q4产物学问", },
{ id:112, pId:11, name:"14Q1产物学问", },
{ id:113, pId:11, name:"14Q2产物学问", },
{ id:114, pId:11, name:"14Q3产物学问", },
{ id:115, pId:11, name:"14Q4产物学问", },
{ id:12, pId:1, name:"项目宣讲类课程", open:true},
{ id:121, pId:12, name:"项目宣讲类课程1"},
{ id:122, pId:12, name:"项目宣讲类课程2"},
{ id:123, pId:12, name:"项目宣讲类课程3"},
{ id:13, pId:1, name:"挪动商学院", open:true},
{ id:131, pId:13, name:"妙技类"},
{ id:132, pId:13, name:"心态类"},
{ id:132, pId:13, name:"学问类"}
];
$.fn.zTree.init($("#planTree"), setting, zNodes);
function zTreeOnClick(event, treeId, treeNode) {
//这里定义点击书中节点时，响应的页面其他的操纵，示例：
// 每次点击节点后， 弹出该节点的 tId、name 的信息
alert(treeNode.tId + ", " + treeNode.name);
};
}如许页面上的树目次就成了，结果如下图所示：
总结
很明显，如许的树只是一个静态牢固节点的树，在大型项目中，每每须要差别的用户看到差别的目次，差别的区域显现差别的目次，等等，但你又不能一个一个定义这些设置来满足那么多数据需求，所以就须要异步加载子节点的的父节点，经由过程组织treeNode的 JSON 数据对象要领来完成，这个要领会在本专栏 zTree — jQuery 树插件 组织treeNode JSON 数据对象 细致引见。
