本日先从实际运用中比较常见的一种展示构造——树提及，之前打仗过树，利用的是ztree，当时便是仓促之间将功能实现了，一贯也没有静下心来好好地研究学习一下。借此机会，大略的梳理一下ztree的干系知识，以备时时之需。
ztree简介
ztree是一个依赖jquery实现的多功能“树插件”，是开源免费的。支持json数据，支持静态和Ajax异步加载节点数据，采取了延迟加载技能，浏览器兼容性较好；支持任意改换皮肤/自定义图标（依赖css）,支持checkbox和radio选择功能，支持编辑（增/删/改/查）功能，可随意拖拽节点；供应多种事宜相应回调，通过大略的参数配置即可实现各种功能，比如在一个页面内可同时天生多个tree实例。
ztree有详细的API和demo
利用ztree首先要引入它的类库，现在出到了v3.5.26，下载后，须要将干系的js、css（包括img等）引入项目。
ztree组件解压之后的目录构造：
对ztree类库的先容：
css文件ztree利用的各种样式文件，比如css文件（包括img）
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的实现，之后会有一些更加繁芜的实现，敬请期待！
