jQuery zTree插件快速实现目录树

Ztree是JQuery的开源树目录插件，用于快速构建网站的树目录结构，提供功能丰富、利于扩展的API。

JQuery ztree官网

只要引入jquery和ztree库js，然后为ztree提供json数据，并设置z trees属性，就可以立即显示树目录。

总而言之，要使用ztree，您必须完成以下步骤：

1.介绍库文件

jquery.js

ztree.js

ztree.css

2.检索数据

你必须考虑数据的来源。

如果您想自己从数据库中查询树结构，您需要知道oracle Connect的递归查询.“连接方式优先”递归查询Oracle中的树结构。递归查询只是意味着一个表应该有两个基本字段：id和pid(子节点和父节点id)。关键字connect by prior用于连接id和pid，并从定义数据行查询的起始点开始，从而获得一个或多个树的树结构。(这里顺便回顾一下sql中的group query group by，它与connect by不同。)

以实际项目为例。应该在项目中获得以下目录树：

执行以下SQL:

从T_RES_OWNER t中选择level、t.dir_id、t.dir_name、t.parent_id，其中t.IS_FOLDER='0 '以1=1开头，t.parent_id='0 '和t.owner_type='0 '和T . USER _ ID=' 136 AC 7 a7 ad 624692 a5b 94d 93 e 0634952 '通过之前的t.dir_id=t.parent_id顺序按级别asc、t.dir_name asc连接；执行结果：

3.封装json输入

以下段落引用了ztree官方网站演示的描述：

然后，从接口获取存储数据的List后，如上组织json供ztree使用，参考下面的代码：

JSONArray树=new JSONArray()；listreasowner list=resoownerservice . selectfoldertree(所有者)；JSONObject obj=nullfor(resoowner resoowner : list){ obj=new JSON object()；obj.put('id '，resoowner . getdirid())；obj.put('pId '，resoowner . GetParentId())；obj.put('name '，resOwner.getDirName()。长度()24？resOwner.getDirName()。子字符串(0，24)“.”: resoowner . getdirname())；obj.put('icon '，SysConf . GetString(' web app . jspconfigull ')' common/CSS/zTreeStyle2/img/leaf _ ico . png ')；tree . add(obj)；} result.put('success '，new Boolean(true))；result.put('data '，tree)；返回结果；4.设置ztree属性

var zNodes=data.datavar设置={ view : { showLine: false，showIcon : true }，data : { simpleData : { enable : true } }，Edit: {enable: true，showremovebtn3360 true，showrenamebtn3360 true，removetitle :' delete '，renameTitle:' rename'}，callback: { onClick://初始化网盘结构树$ . fn . ztree . init($(' # treedemo _ mydoc ')，设置，ZnO des)；div class=' ztreedemobackground 2 left ' style=' width :168 px；'ul id=' TreeDemo _ my doc ' class=' ztree 2 ' style=' width :168 px；Height: 168px'/ul /div可以在setting.callback中设置各种回调函数，实现更复杂的功能。有关详细信息，请参见ztree api文档。经过以上步骤，ztree完成了一个具有基本功能的目录树。

总结：

用基本函数实现目录树实际上非常简单。说白了就是需要提供ztree需要的json数据，然后设置一些属性。其他工作将由ztree插件完成。困难在于通过oracle的connect by获取数据源。除此之外，页面交互还测试JavaScript技能。毕竟很多地方都需要异步加载来提升用户体验。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。