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>

③ 在进入页面时初始化树形数据

$(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 后台数据的构建：

zTree的功能解析

数据构建如上图所示，将数据结果加入到zTreeNodes中树形结构数据就封装完成，效果图如下

zTree的功能解析

1.1.3 树形列表与jqgrid表格的应用

开发过程中，需要根据左边树形结构列表的数据去查询数据或者其他具体操作，页面结构如下图展示根据左边节点数据查询数据，页面构建方法如下：

zTree的功能解析

</div>

</div>

通过在zTree的setting中定义回掉函数来调用zTree的onClick方法，如下图展示

zTree的功能解析

这些是我在开发过程中zTree的应用，具体的参数以及内容大家可疑参考http://www.ztree.me/v3/main.php

秒客网

zTree的功能解析

1.1.1 页面构建方式

1.1.2 后台数据的构建：

1.1.3 树形列表与jqgrid表格的应用

相关文章