zTree(jQuery树插件)

zTree软件是jQuery的树软件,zTree完全免费给予全部调节功能.这儿多特软件站我为小伙伴们梳理了较为好用的zTree使用方法,便捷小伙伴们迅速入门jQuery.热烈欢迎有兴趣的客户来多特软件站下载应用!

ztree是什么

zTree 是一个借助 jQuery 完成的多功能 树软件.出色的特性、灵便的配备、多种多样功能的组成是 zTree 较大优势.

出色的特性、灵便的配备、多种多样功能的组成等多种多样优点于一身,专业合适新项目开发设计,尤其是树形结构菜单栏、树形结构数据的Web表明、管理权限这些

zTree v3.0 将核心编码依照功能开展了切分,不用的编码可以无需加载

ztree api操作手册

1、js 核心文档

①zTree v3.x 有 3 个 js 文档,一个 核心包 ( jquery.ztree.core-3.x.js ),2个拓展包 -- 勾选框功能包 ( 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 案例

简易的参数配置完成 灵便变化多端的功能

使用方法

1、最先将必须采用的zTree v3.5.30有关的 js、css、img 文档各自放到相对应文件目录,而且确保绝对路径恰当

2、撰写 html 网页页面

依照下列编码,制做html 网页页面,浏览试试看吧!

留意:

1) 是必不可少的!

2) zTree 的器皿 className 别忘记设定为 ztree

3) 新手入门取得成功后,就可以依照次序去看看 Demo 了,立即看一下源代码,应当看得懂的