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 = '';

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