首页 > 代码库 > zTree的功能解析
zTree的功能解析
zTree ，一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。兼容 IE、FireFox、Chrome 等浏览器，在一个页面内可同时生成多个 Tree 实例、支持 JSON 数据、支持一次性静态生成 和 Ajax 异步加载 两种方式、支持多种事件响应及反馈、支持 Tree 的节点移动、编辑、删除、支持任意更换皮肤 / 个性化图标（依靠css）、支持极其灵活的 checkbox 或 radio 选择功能、简单的参数配置实现 灵活多变的功能等特点。
1、 zTree的核心是zTree(setting, [zTreeNodes])两个属性，这个函数接受一个JSON格式的数据对象setting和一个JSON格式数据的zTreeNodes从而来构建ztree。
2、 setting : zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置，setting参数数量较多，具体可参考zTree的API，例如：
var setting = {
showLine: true,
checkable: true
};
3、 zTreeNodes：是ztree的全部节点数据结合，采用由JSON对象组成的数据结构；zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式。
带有父子关系的标准zTreeNodes如下：
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];
带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
......
];
1.1.1 页面构建方式
1、下面详细展示平台中开发所使用的zTree的构建结构以及步骤：
① 页面引用zTree的js和css： 平台中的css,js统一引入公共方法
② 在页面定义zTree盛放容器：
<div flex="20">
<ul id="moduleTree" class="ztree"></ul>
</div>
③ 在进入页面时初始化树形数据
$(function() {
zTree = $("#modulTree").zTree(setting, treeNodes);
});
④ 在script脚本中定义setting和zTreeNodes:
var treeNodeData = http://www.mamicode.com/‘‘;
var setting = {};
$(function(){
setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
onClick:moduleClick
}
};
var zTreeNodes = $!{moduleTreeData.encodeJson};
$.fn.zTree.init($("#moduleTree"), setting, zTreeNodes)
1.1.2 后台数据的构建：
数据构建如上图所示，将数据结果加入到zTreeNodes中树形结构数据就封装完成，效果图如下
1.1.3 树形列表与jqgrid表格的应用
开发过程中，需要根据左边树形结构列表的数据去查询数据或者其他具体操作，页面结构如下图展示根据左边节点数据查询数据，页面构建方法如下：
<div flex="20">
<ul id="moduleTree" class="ztree"></ul>
</div>
<!-- 列表 -->
<div flex="80">
<div class="panel-group cus-collapse box-shadow" id="accordion">
<div class="panel panel-default">
<div class="cus-grid" id="grid-wrap">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</div>
</div>
</div>
通过在zTree的setting中定义回掉函数 来调用zTree的onClick方法，如下图展示
这些是我在开发过程中zTree的应用，具体的参数以及内容大家可疑参考http://www.ztree.me/v3/main.php
zTree的功能解析