第一范文网 - 专业文章范例文档资料分享平台

zTree总结 - 图文

来源:用户分享 时间:2025/10/7 20:57:53 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

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样式

搜索更多关于: zTree总结 - 图文 的文档
zTree总结 - 图文.doc 将本文的Word文档下载到电脑,方便复制、编辑、收藏和打印
本文链接:https://www.diyifanwen.net/c1rijt0d6yl1j03v4hzh7_1.html(转载请注明文章来源)
热门推荐
Copyright © 2012-2023 第一范文网 版权所有 免责声明 | 联系我们
声明 :本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
客服QQ:xxxxxx 邮箱:xxxxxx@qq.com
渝ICP备2023013149号
Top