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.form.js异步提交表单详解
Apr 25 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
详解Python中break语句的用法
2015/05/14 Python
给Python入门者的一些编程建议
2015/06/15 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
非常详细的C#面试题集
2016/07/13 面试题
店长助理岗位职责
2013/12/13 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
车辆转让协议书
2014/04/15 职场文书
终止合同协议书
2014/04/17 职场文书
计生专干事迹
2014/05/28 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
社团招新宣传语
2015/07/13 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技