写点什么

zTree

作者:andy
  • 2022-10-28
    北京
  • 本文字数:2185 字

    阅读完需:约 7 分钟

一、zTree 简介


zTree 是一个以 jQuery 库为基础实现的“树插件”,优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 基于 MIT 认证,是一款不错的开源免费软件。



Q1:怎么体现优异的性能?

A1:


zTree 特点

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

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

采用了“延迟加载”技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀;

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

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

支持 JSON 和 Array 数据;

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

提供多种事件响应回调;

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

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

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


Q2:什么是延迟加载技术?

A2:

授权许可 ( MIT License )

copyright (c)<2011>

使用该许可证的软件被授予以下权限,免费,任何人可以得到这个软件及其相关文档的一个拷贝,并且经营该软件不受任何限制,包括无限制的使用、复制、修改、合并、出版、发行、发放从属证书、或者出售该软件的拷贝的权利。同时允许获得这些软件的用户享受这些权利,使其服从下面的条件:

以上的版权通知和权限通知应该包含在所有该软件的拷贝中或者是其他该软件的真实部分中。

该软件按本来的样子提供,没有任何形式的担保,不管是明确地或者暗含的,包含这些但是不受商业性质的担保的限制。适合一个特定的用途并且不受侵犯。作者和版权持有人在任何场合对使用该软件涉及的任何要求、损害或者其他责任都不应负责。不管它是正在起作用还是只是合同形式、民事侵权或是其他方式,如由它引起,在其作用范围内、与该软件有联系、该软件的使用或者有这个软件引起的其他行为。


Q3:zTree v3.0 于 2011 年诞生,直到 2013 年升级为 v3.5.12,之后再无更新,为什么会出现这样的情况?

A3:从 2007 年 Apple 发布 iPhone 开始,到 2012 年移动互联网元年,随后的几年,移动互联网以极大的速度向前发展,而 PC 端网民则已经趋于饱和,PC 端浏览器技术也已经非常稳定,在这样的时代背景下,zTree 会停留在 v3.5 也是基于此。


二、zTree v3.x 使用注意事项


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 中 自定义图标都是独立的图片文件,实际开发中建议也都采用图片切割的方式;

Q1:如何实现图片切割?

A1:

4、zTree 数据

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

5、调试代码

进行程序开发时,建议首先使用 chrome 或 firefox 进行调试工作 -- 普通 js 调试,ajax 获取数据时网络情况的跟踪都很容易。 推荐:chrome 的开发人员工具或 firefox 的 firebug 插件;


三、zTree v3.x 入门指南


步骤 1、文件准备

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

步骤 2、编写 html 页面

1) "" 是必需的!;

2) zTree 的容器 className 设置为 "ztree";


<!DOCTYPE html><HTML> <HEAD>  <TITLE> ZTREE DEMO </TITLE>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">  <script type="text/javascript" src="jquery-1.4.2.js"></script>  <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>  <SCRIPT LANGUAGE="JavaScript">   var zTreeObj;   // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)   var setting = {};   // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)   var zNodes = [   {name:"test1", open:true, children:[      {name:"test1_1"}, {name:"test1_2"}]},   {name:"test2", open:true, children:[      {name:"test2_1"}, {name:"test2_2"}]}   ];   $(document).ready(function(){      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);   });  </SCRIPT> </HEAD><BODY><div>   <ul id="treeDemo" class="ztree"></ul></div></BODY></HTML>
复制代码


用户头像

andy

关注

还未添加个人签名 2019-11-21 加入

还未添加个人简介

评论

发布
暂无评论
zTree_andy_InfoQ写作社区