zTree总结 - 图文

ZTree简介

ZTree是什么:

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

为什么使用ZTree控件:

优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

1、运行效率高,采用了延时加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

2、用户体验高,页面内可同时生成多个 Tree 实例,支持任意更换皮肤 / 自定义图标,支持极其灵活的 checkbox 或 radio 选择功能可以给用户带来较高的用户体验

3、兼容性好,支持各大主流浏览器( IE、FireFox、Chrome、Safari) 4、配置简单,灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽

5、支持 JSON 数据

6、支持静态和 Ajax 异步加载节点数据

ZTree使用说明

前提条件:

页面要引入

jquery.ztree.all-3.3.js jquery-1.4.4.min.js zTreeStyle.css

导入img文件夹

Java端要引入

Json-lib-2.1.jar 数据库表中字段必须要有三个: id pid name

思路详解

动态显示zTree树形结构

在页面端要引入相关js文件以及css样式文件,java端引入json-lib.jar包,当客户端发送请求到action中,action访问service,service访问dao,之后返回List,将List转换成json数组,再将json数组转换成json字符串(http请求接收的是字符串),然后再将json字符串返回到jsp页面(确切的说是将json字符串返回到jsp页面中zNodes这一变量中)。

页面通过jquery加载方法ready来加载zTree,zTree则通过内部封装好的init方法来加载树,首先要加载显示树的网页元素(一般为div或者ul),其次配置树通过setting配置常用参数,之后加载树节点zNodes,zNodes也是从后台传过来的json字符串,最后动态加载树完成。

通过右键操作,动态对树zTree进行增删改

在页面端要引入相关js文件以及css样式文件,java端引入json-lib.jar包,页面端需要配置右键div对树的操作如:增加、修改、删除节点,div首先要将其隐藏,然后页面进行加载树,通过配置右键节点事件来调用右键方法,右键事件触发后将右键div对树的操作变为显示,通过点击 增加/修改/删 调用其方法,其次通过ajax提交到后台action中,action访问service,service访问dao,然后进行相关的增删改对数据库操作,之后通过ajax的回调函数将 增加/修改/删除的节点进行页面显示,最后对节点相关的动态逻辑操作完成。

异步加载zTree

在页面端要引入相关js文件以及css样式文件,java端引入json-lib.jar包,页面端需要配置异步加载async,并设置其中的参数enable开启异步和url请求地址以及autoParam提交的父节点属性,然后通过url请求action,action访问service,service访问dao,将以pid为条件查询出菜单列表放入list中,然后再查出所有菜单列表放入另一个list中,遍历list,通过两者的id与pid比较是否相等以及根节点的pid为0,得到某一节点为父节点,然后将isParent 设置为true,最后将list通过JSONARRAY.fromObject方法转换成json数组发送给页面,异步加载zTree完成

操作详解

动态显示zTree (从数据库取将内容用zTree显示)

数据库zTree表的详细信息

一.页面端

引入js以及css样式

联系客服:779662525#qq.com(#替换为@)