我的第一个ztree实现

从今天起，逐步盘点一下这些年使用的技术，一来是缅怀一下过去的岁月，二来是总结提升，在自己下一次使用这些技术的时候会更加的得心应手。

今天先从实际应用中比较常见的一种展示结构——树说起，之前接触过树，使用的是ztree，当时就是仓促之间将功能实现了，一直也没有静下心来好好地研究学习一下。借此机会，简单的梳理一下ztree的相关知识，以备不时之需。

ztree简介

ztree是一个依靠jquery实现的多功能“树插件”，是开源免费的。支持json数据，支持静态和Ajax异步加载节点数据，采用了延迟加载技术，浏览器兼容性较好；支持任意更换皮肤/自定义图标（依靠css）,支持checkbox和radio选择功能，支持编辑（增/删/改/查）功能，可随意拖拽节点；提供多种事件响应回调，通过简单的参数配置即可实现各种功能，比如在一个页面内可同时生成多个tree实例。

ztree有详细的API和demo

使用ztree首先要引入它的类库，现在出到了v3.5.26，下载后，需要将相关的js、css（包括img等）引入项目。

ztree组件解压之后的目录结构：

对ztree类库的介绍：

1. css文件
   ztree使用的各种样式文件，比如css文件（包括img）

2. js文件
   

jquery.ztree.core是ztree的核心库，包括基本展示功能

jquery.ztree.excheck是ztree关于复选框/单选框的扩展库

jquery.ztree.exedit是ztree关于编辑操作的扩展库

jquery.ztree.exhide是ztree关于节点隐藏的扩展库

jquery.ztree.all是core+excheck+exedit的组合（不包括exhide）

具体的使用过程：

将ztree组件的css和js文件夹复制到项目的webroot下，就可以在项目中通过引用相关的资源文件实现ztree的各项功能。

新建页面，引入css和js资源文件（本例是第一个ztree的实现，使用的是jquery.ztree.core）

注意，由于ztree是基于jquery实现的类库，所以，还需要将jquery一并引入页面

在页面上初始化ztree容器：

注意需要使用ztree提供的样式class="ztree"

之后，就可以初始化ztree了，需要在js中实现

<script type="text/javascript">

var setting={};

var zNodes=[

{name:xxx,open:true,children:[...]},

........

{name:xxx,open:true,children:[...]}

];

$(document).ready(function(){

$.fn.zTree.init($("#ztreeDemo"),setting,zNodes);

});

</script>

其中，在setting中可以配置ztree的各种参数，以实现更加复杂的功能

zNodes中是ztree所要显示的节点数据，有两种数据模式，标准json格式和简单json格式：

标准json格式：

简单json格式：

值得一提的是在实际的使用中，多使用简单json格式，尤其是数据库查询展示到前台页面。作为入门，本例先使用标准的标准的json格式，之后大多使用简单的json格式。

使用标准数据格式可以不用设置setting中的参数，使用简单数据格式至少需要设置seeting.data.simpleData属性：

至此，一个简单的ztree就实现了，具体的代码实现（jsp文件）：

启动tomcat服务器，访问页面的效果：

以上即为我的第一个ztree的实现，之后会有一些更加复杂的实现，敬请期待！