-
1. zTree
介绍
zTree
是一个依靠
jQuery
实现的多功能
“
树插件
”
。优异的性能、灵活的配置、多种
功能的组合是
zTree
最大优点。专门适合项目开发，尤其是
树状菜单、树状数据的
Web
显示、权限管理等等。
zTree
是开源免费的软件（
MIT
许可证）。在开源的作用下，
zTree
越来越完善，目
前已经拥有了不少粉丝，并且今后还会推出更多的
< br>
zTree
扩展功能库，让
zTree
更加强
大。
zTree
2. zTree
的特点
● zT
ree v3.0
将核心代码按照功能进行了分割，不需要的代码可以不用加载
●
采用了
延迟加载
技术，上万节点轻松加载，即使在
IE6
下也能基本做到秒杀
●
兼容
IE
、
FireFox
、
Chrome
、
Opera
、
Sa
fari
等浏览器
●
支持
JSON
数据
●
支持静态
和
Ajax
异步加载节点数据
●
支持任意更换皮肤
/
自定义图标（依靠
css
）
●
支持极其灵活的
checkbox
或
radio
选择功能
●
提供多种事件响应回调
●
灵活
的编辑（增
/
删
/
改
/
查）功能，可随意拖拽节点，还可以多节点拖拽哟
●
在一个页面内可同时生成多个
Tree
实例
●
简单的参数配置实现
灵活多变的功能
3. zTree
的优势
zTree
的作者利用业余时间不断改进
zTree
功能，并且还能及时与用户沟通，及时回
复各种疑问，便于新用户快速掌握。目前越来越多的用户都使用
zTree
替换了系统中原有
的
树插件，这其中包括最近刚发布最新版本的
QUI
框架。
大家也可以从官网
/v3
/#_zTreeInfo
看一些列子、下包！
本处以提供（
JQuery zTree
）
；
4.
zTree
整体解析：
首先把
JQuery zTree
解
压放到
web
目录下
（可以根据业务需
求自定义）
，
然后看一下
代码应用的整
体结构：
以下内容有图有真相
1
、引入
zTree
相关的
js
、
css
文件（如下图所示）
：
<
/p>
2
、
zTree
异步加载的一些配置，业务需求不同配置也不同，看图分析：
查看大图
从图中看到已经表明的六处配置信息，
从字面上就可以看出大概信息，
< br>注意：
以下分析的都
是关键字不可更改！
标记
1
：
< br>async
:
异步的，主要配置一下
url
或
Ajax
获取的数据类型
等等
…
标记
2
：
check
:
字面理解就是检查的意思，但是有没有联想到
checkbox
那？
不错他就实现了下图中的效果
(
当然前提是要设置
enable
为
true
的情况下
)
：
标记
3
：<
/p>
data
:
数据，主要配置一些属性锁、
对应关系！
（注意：非常重要，本人不幸栽过
跟头
）
！
标记
4
：
edit
:
编辑，主要配置一些是否允许拖拽、全选、辅助信息等等
…
< br>
标记
5
：
view
:
字面意思观察、查看，我们称为视图，主要配置
一下我们宏观上就可以看到
的一下信息，如：字体颜色、背景颜色、是否支持
html
脚本、节点之间的连线：
标记
6
：<
/p>
callback
：
回调，主要调用业务
中所需要的一些函数！
3
、声明节点：
看下图，
zTree
节点的声明必须是
json
类型，其中
id
，
pId
，
name
都
是关键字，如果有必要
可以通过
setting
配置里的
data
配置进行替换！
4
、函数调用：
函数的调用主要根据业务的需求有关，在这里咱们只分析下
async
配置里
url
的函数：
看图片注释！
5
、不可遗忘的配置信息：
查看大图
5. zTree
具体代码具体解析：
1
、
async:
Enable:
true
就是开启异步加载，因为业务的需求一般默认都是
true,
在此处如果改成
false
的否则会有下图异常
：
2
、
check:
我们先看一下上图的结果：
图
1
、
enable
:true
图
2
、
enable:false
如果
chkStyle:radio
看图：
具体下面注掉的一些配置，我们根据测试分析！
3
、
data:
如果
Model
里的字段名和
zTree
里
zNo
des
不一致，就需要配置上面的信息
大家可以参考一下
zTree
原始的
zNodes
样式：
< br>
如果不一致会报异常！
4
、
edit:
在这里主要配置了节点的编辑、删除的一些信息，以及一些辅助信息！看图：
同样
enable
< br>要设成
true,
咱们看图对比一下：
< br>
1
、
E
nable:false
2
、
enable:true
因为
edit
主要就是配置一些编辑、
删除的一些辅助信息，
所以如果把<
/p>
enable
设成
false
的话编辑和删除按钮就会消失，同样也就无法编辑和删除了！
RemoveTitle
和
RenameTitl
e
主要起提示的作用：
此时我把
RemoveTitle
:
”
删除节点
”
注释掉，
如果把
鼠标放在
x
号上就是
remove
提示，
打开注释就是图
2
< br>的提示！
图
1
图
2
showRemoveBtn
和
showRenameBtn
分别是显示删除按钮和编辑按钮，默认
是
ture,
如果是
false
编辑和删除按钮都会消失：
showRemoveBtn
:
setRemoveBtn
是调用了下面的函数，用来判断当前节点是否为
顶级节点如果是就不会显示删除按钮，可以根据业务需求自定义：
如果
ed
itNameSelectAll
设置成
true
的话点击编辑，
节点进入编辑状态，
并且名字进
入全选状态：
editNameSelectAll:true
editNameSelectAll:false
5
、
view:
视图，
完全可以通过宏观看出来的变化，
一个非常有意思的
配置，我们先来仔细分析一
下：
-
-
-
-
-
-
-
-
-
上一篇：小学教材中古诗词常见误读音之辨
下一篇：《游园不值》阅读答案