oracle 生成目录树,jQuery zTree插件快速实现目录树
ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API。
JQuery ztree官网
只要引入jquery和ztree的库js,然后给ztree提供需要的json数据,并且设置好ztress的属性,就可以即刻展示出树形目录。
总结下来,要使用ztree的话,必须要完成以下几步:
1. 引入库文件
jquery.js
ztree.js
ztree.css
2. 获取数据
你要思考数据来源问题了。
如果要自己从数据库查询树形结构这时候你需要知道oracle的递归查询connect by:oracle中使用start with...connect by prior递归查询树形结构。递归查询简单来讲就是一个表中要具备2个基本字段:id和pid(子节点和父节点id),使用关键字connect by prior来连接id和pid,start with定义数据行查询的初始点,由此获取一棵或者多棵树的树形结构。(这里顺便回忆一下sql里的分组查询group by,跟connect by区分开来。)
拿实际项目举例,项目中要获取如下的目录树:
执行以下SQL:
select level, t.dir_id, t.dir_name, t.parent_id
from T_RES_OWNER t
where t.IS_FOLDER = '0'
start with 1 = 1
and t.parent_id = '0'
and t.owner_type = '0'
and t.USER_ID = '136ac7a7ad624692a5b94d93e0634952'
connect by prior t.dir_id = t.parent_id
order by level asc, t.dir_name asc;
执行结果:
3. 封装json输入
下面一段引用ztree官网demo的描述:
那么,从接口获取到存放数据的List之后,按照如上组织json给ztree使用即可,参考以下代码:
JSONArray tree = new JSONArray();
List list = resOwnerService.selectFolderTree(owner);
JSONObject obj = null;
for(ResOwner resOwner : list){
obj = new JSONObject();
obj.put("id", resOwner.getDirId());
obj.put("pId", resOwner.getParentId());
obj.put("name", resOwner.getDirName().length() > 24?resOwner.getDirName().substring(0,24)+"...":resOwner.getDirName());
obj.put("icon", SysConf.getString("webapp.jspconfigUrl") + "common/css/zTreeStyle2/img/leaf_ico.png");
tree.add(obj);
}
result.put("success", new Boolean(true));
result.put("data", tree);
return result;
4. 设置ztree属性
var zNodes = data.data;
var setting = {
view : {
showLine: false,
showIcon : true
},
data : {
simpleData : {
enable : true
}
},
edit: {
enable: true,
showRemoveBtn: true,
showRenameBtn: true,
removeTitle: "删除",
renameTitle: "重命名"
},
callback: {
onClick: zTreeOnClick,
beforeRemove: zTreeBeforeRemove,
onRename: zTreeOnRename
}
};
//初始化网盘结构树
$.fn.zTree.init($("#treeDemo_mydoc"), setting, zNodes);
可以在setting.callback里面可以设置各种回调函数,用以实现更加复杂的功能,详见ztree api文档经过以上步骤,用ztree实现一个具有基本功能的目录树就完成了。
总结:
实现一个基本功能的目录树其实很简单,说白了就是要提供ztree需要的json数据,然后设置一些属性,其他工作就交给ztree插件来完成了,其难点在于用oracle的connect by获取数据源,另外,页面交互也比较考验JavaScript功底,毕竟很多地方是需要异步加载来提高用户体验。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
oracle 生成目录树,jQuery zTree插件快速实现目录树相关推荐
- j2ee 简单网站搭建:(十)jquery ztree 插件使用入门
为什么80%的码农都做不了架构师?>>> <j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目> < ...
- 表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
- 树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
- jquery ztree插件使用
官网:ztree.me,下载插件 在页面中引入ztree相关的文件: <link rel="stylesheet" href="../../../css/zTree ...
- jQuery UI 插件
jQuery UI 插件 1.概述 1.简介 UI -> User Interface用户界面 jQuery UI是jQuery官方提供的插件,他强化了jQuery中搭载的动画效果及特效,以实现 ...
- 电脑在cmd命令行下快速切换目录文件
文章目录: 第一部分: 快速切换目录文件 1.切换到指定磁盘 2.目录之间切换 3.切换到指定目录通过cmd 4.相关命令 第二部分:电脑常用Win+R快捷命令 第三部分:Windows10 触摸板手 ...
- chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容 我用到的插件 vue+ ...
- Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
- 使用jquery第三方插件(生成曲线图)
最近项目中有用到生成曲线图,经过查找资料解决了,虽然有简单说明但参数比较多和麻烦,于是自己没事就总结了项目中的具体用法: 准备工作:首先添加jquery的插件包到程序中,路径:http://files ...
最新文章
- 人工智能尴尬的2019:需要钱却没钱可烧了
- Opencv Mediapipe 人体追踪
- 100年前没人信他,但他仅1项研究便远程摧毁万架飞机……
- 团队-科学技术器-模块测试过程
- ThreadLocal以及增强
- Oracle入门(七)之表空间
- 通用mapper如何处理多表条件查询通过list封装(强烈不推荐)(一对一,一对多)
- 北京公交公开招标思路
- Coinbase报告:DeFi协议总锁仓价值已超250亿美元,同比增长2500%
- 详解nginx 代理多个服务器(多个server方式)
- 脚本加密http://www.datsi.fi.upm.es/~frosal/sources/
- java—将数据库读取的list转tree
- 【php】基础学习4
- 【1】Matlab深度学习环境配置-入门
- android实现视频壁纸,ffmpeg/camera实现最近很火的视频壁纸,相机壁纸
- QTTabBar 安装使用记录
- 苹果唯冠邮件背后的隐情
- Python中的爬虫
- 深度学习 音乐分类_一种基于深度学习的音乐个性化分类推荐方法与流程
- 骁龙435/MSM8940处理器详细规格(补充说明)
热门文章
- ACE入门---很好的文章
- 【Bash百宝箱】shell内建命令之echo、printf
- 包r语言_R语言代码共享:制作R包
- 将特定像素点在图像上连接起来_图像分割【论文解读】快速图像分割的SuperBPD方法 CVPR-2020...
- python模拟通讯录的删除功能_python+uiautomator2 实现需求:从通讯录添加手机号码,若存在旧的 SOS号码,先删除再添加,若通讯录中没有号码,需先新建。...
- c memcpy 与 strcpy 区别
- 嵌入式开发之网络心跳包---阻塞和非阻塞以及是否有必要心跳包heartbeat
- 那些人工智能未来式,没看过你就 OUT 了
- 【372天】我爱刷题系列131(2018.02.12)
- Linux启动网卡时出现RTNETLINK answers: File exists错误解决方法