zTree(jQuery树插件)

zTree插件是jQuery的树插件,zTree免费提供所有调试功能.这里it猫扑小编为小伙伴们整理了比较实用的zTree使用教程,方便小伙伴们快速上手jQuery.欢迎感兴趣的用户来IT猫扑下载应用!

ztree是什么

zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点.

优异的性能、灵活的配置、多种功能的组合等多种优势于一身,专门适合项目开发,尤其是树状菜单、树状数据的Web显示、权限管理等等

zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载

ztree api使用手册

1、js 核心文件

①zTree v3.x 有 3 个 js 文件,一个 核心包 ( jquery.ztree.core-3.x.js ),两个扩展包 -- 复选框功能包 ( jquery.ztree.excheck-3.x.js ) & 编辑功能包 ( jquery.ztree.exedit-3.x.js )

②使用 zTree v3.x 时,核心包必须加载,扩展包根据需要进行加载;这种结构有利于今后不断开发 zTree 的各种辅助功能或工具,而不影响基本功能.

③在实际使用中,建议将使用的扩展包 与 核心包 代码合并为一个 js 文件,以节省网络资源,合并时一定要将核心包的代码放在最前面.

2、css 文件

①zTree v3.x 只使用一个 zTreeStyle.css 文件,为了尽量避免样式冲突,将 zTree 容器的 className 设置为 'ztree'

②v3.x 中对于主要 DOM ( li、ul、+/-图标、a ) 的 className 增加了 level 输出,可以针对不同等级的节点设定独立的样式

3、img 图片

①zTree v3.x 将主要图标都合并为一个图片,利用图片切割方式显示图标

②为了避免原先节点连线之间 1 像素间隔的问题,在 v3.x 中 +/-图标 继续保留 18*18 的尺寸,其余图标全部修改为 16*16,请升级的朋友务必注意修正原先使用的图标大小

③在 v3.x Demo 中 自定义图标都是独立的图片文件,实际开发中建议也都采用图片切割的方式

4、zTree 数据

zTree 使用 JSON 数据,关于数据部分请认真查看 API 文档 "treeNode 节点数据详解" 中的内容,并且在 Demo 中也都可以看到 treeNode 的定义

5、调试代码

进行程序开发时,建议首先使用 chrome 或 firefox 进行调试工作 -- 普通 js 调试,ajax 获取数据时网络情况的跟踪都很容易. 个人推荐:chrome 的开发人员工具或 firefox 的 firebug 插件.加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

ztree官网功能说明

兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

支持 JSON 数据

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

支持任意更换皮肤 / 自定义图标(依靠css)

支持极其灵活的 checkbox 或 radio 选择功能

提供多种事件响应回调

灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟

在一个页面内可同时生成多个 Tree 实例

简单的参数配置实现 灵活多变的功能

ztree教程

1、首先将需要使用的zTree v3.5.30相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确

2、编写 html 页面

按照以下代码,制作html 页面,访问试试看吧!

注意:

1) "" 是必需的!

2) zTree 的容器 className 别忘了设置为 "ztree"

3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的