做的就是西部区域面板中的树形导航图。
Easyui中也有树,但是这个树不够强大。
zTree性能非常好,功能强大。
介绍:
l 什么是zTree呢?
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree的最大优点。
zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载
采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
既然它是jQuery插件,就必须引入jQuery库。
l 下载zTree
http://www.ztree.me/v3/main.php#_zTreeInfo
点击下载即可。
这里使用的是3.5.02版本。
官网上还有一些演示和文档,不过这些东西在下载下来的包中都已经有了,所以直接下载即可。
l 解压包的目录结构:
Api : 使用文档说明
Css : 树样式文件
Demo : 使用案例
Js : 需要引入的文件
打开js目录,发现有很多js,导入一个即可:
zTree是由一个核心js和三个外围扩展js组成的,core就是核心,下面的三个以ex开头的就是扩展的。
Excheck是勾选效果。
Exedit是可编辑效果。
Exhide是节点隐藏效果。
所以说,all.js = core.js + check.js +edit.js + hide.js
开发者只需要导入all.js就可以使用zTree的所有功能。
l 此外,开发者还需要导入\JQueryzTree v3.5.02\css\zTreeStyle下的zTreeStyle.css文件。
1,在工程中新建一个目录,结构如下: