jQuery zTree插件快速实现目录树


Posted in jQuery onAugust 16, 2019

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区分开来。)

拿实际项目举例,项目中要获取如下的目录树:

jQuery zTree插件快速实现目录树

执行以下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;

执行结果:

jQuery zTree插件快速实现目录树

3. 封装json输入

下面一段引用ztree官网demo的描述:

jQuery zTree插件快速实现目录树

那么,从接口获取到存放数据的List之后,按照如上组织json给ztree使用即可,参考以下代码:

JSONArray tree = new JSONArray();
  List<ResOwner> 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);
<div class="zTreeDemoBackground2 left" style="width:168px;">
     <ul id="treeDemo_mydoc" class="ztree2" style="width:168px;height: 168px"></ul>
 </div>

可以在setting.callback里面可以设置各种回调函数,用以实现更加复杂的功能,详见ztree api文档经过以上步骤,用ztree实现一个具有基本功能的目录树就完成了。

总结:

实现一个基本功能的目录树其实很简单,说白了就是要提供ztree需要的json数据,然后设置一些属性,其他工作就交给ztree插件来完成了,其难点在于用oracle的connect by获取数据源,另外,页面交互也比较考验JavaScript功底,毕竟很多地方是需要异步加载来提高用户体验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 #jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
python之wxPython应用实例
2014/09/28 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python 读写中文json的实例详解
2017/10/29 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
阿德的梦教学反思
2014/02/06 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
入党政审材料范文
2014/12/24 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers