JQuery开源树形目录的插件--zTress

概念：

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

    zTree是开源免费的软件。

网址：http://www.treejs.cn/v3/main.php#_zTreeInfo

特点：

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

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

 
支持JSON 数据、支持一次性静态生成
和Ajax 异步加载 两种方式、

 
支持多种事件响应及反馈、

 
支持Tree 的节点移动、编辑、删除、

 
支持任意更换皮肤/ 个性化图标（依靠css）、

 

 

  支持极其灵活的checkbox

或radio

选择功能、简单的参数配置实现 灵活多变的功能。

使用过程：

步骤
1、文件准备

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

步骤
2、编写
html
页面

 

 

按照以下代码，制作
html
页面

    1)
""
是必需的！

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

    3)

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

步骤
3、 获取数据

如果要自己从数据库查询树形结构这时候你需要知道Oracle

的递归查询connect
by：

oracle中使用start
with...connect by prior递归查询树形结构。

递归查询简单来讲就是一个表中要具备2个基本字段：

id和pid（子节点和父节点id），

使用关键字connect by
prior来连接id和pid，start
with定义数

 

 

据行查询的初始点，由此获取一棵或者多棵树的树形结构。

Json介绍：http://www.json.org/json-zh.html

总结：

  使用zTress只需提供ztree需要的json数据，然后设置一些属性，其他工作就交给ztree插件来完成了

 

 
其难点在于用oracle的connect
by获取数据源，另外，页面交互也比较考验JavaScript功底，毕竟很多地方是需要异步加载来提高用户体验。