ztree简介_动力节点Java学院整理


Posted in Javascript onJuly 19, 2017

【简介】

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

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

官方文档:http://www.treejs.cn/v3/main.php#_zTreeInfo

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

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

   支持 JSON 数据

   支持一次性静态生成 和 Ajax 异步加载 两种方式

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

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

   支持任意更换皮肤 / 个性化图标(依靠css)

   支持极其灵活的 checkbox 或 radio 选择功能

   简单的参数配置实现 灵活多变的功能  

 【部分函数和属性介绍】

  核心:zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。 

  核心参数:setting

zTree 的参数配置都在这里完成,简单的说:树的样式、事件、访问路径等都在这里配置

setting 举例:

Js代码  

var setting = { 
 showLine: true, 
 checkable: true 
};

因为参数太多,具体参数详见zTreeAPI 

  核心参数:zTreeNodes

zTree 的全部节点数据集合,采用由JSON对象组成的数据结构,简单的说:这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种:利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准 zTreeNodes 举例:

Js代码  

var zTreeNodes = [ 
 {"id":1, "name":"test1", "nodes":[ 
 {"id":11, "name":"test11", "nodes":[ 
 {"id":111, "name":"test111"} 
 ]}, 
 {"id":12, "name":"test12"} 
 ]}, 
 ...... 
];

②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例:

Js代码  

var treeNodes = [          
 {"id":1, "pId":0, "name":"test1"}, 
 {"id":11, "pId":1, "name":"test11"}, 
 {"id":12, "pId":1, "name":"test12"}, 
 {"id":111, "pId":11, "name":"test111"}, 
 ...... 
];

 【实例一】(Java代码)

①在页面引用zTree的js和css:

Html代码  

<!-- ZTree树形插件 --> 
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" type="text/css"> 
<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" rel="external nofollow" type="text/css"> --> 
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

②在script脚本中定义setting和zTreeNodes

Java代码  

var setting = { 
 isSimpleData : true,  //数据是否采用简单 Array 格式,默认false 
 treeNodeKey : "id",  //在isSimpleData格式下,当前节点id属性 
 treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性 
 showLine : true,   //是否显示节点间的连线 
 checkable : true   //每个节点上是否显示 CheckBox 
 }; 
 
var treeNodes = [ 
 {"id":1, "pId":0, "name":"test1"}, 
 {"id":11, "pId":1, "name":"test11"}, 
 {"id":12, "pId":1, "name":"test12"}, 
 {"id":111, "pId":11, "name":"test111"}, 
];

 ③在进入页面时生成树结构:

Js代码  

var zTree;

Js代码  

$(function() { 
 zTree = $("#tree").zTree(setting, treeNodes); 
 });

④最后查看效果:

ztree简介_动力节点Java学院整理

【实例二】(从后台获取简单格式Json数据)

①后台代码封装简单格式Json数据:

Java代码 

public void doGetPrivilegeTree() throws IOException{ 
 String s1 = "{id:1, pId:0, name:\"test1\" , open:true}"; 
 String s2 = "{id:2, pId:1, name:\"test2\" , open:true}"; 
 String s3 = "{id:3, pId:1, name:\"test3\" , open:true}"; 
 String s4 = "{id:4, pId:2, name:\"test4\" , open:true}"; 
 List<String> lstTree = new ArrayList<String>(); 
 lstTree.add(s1); 
 lstTree.add(s2); 
 lstTree.add(s3); 
 lstTree.add(s4); 
 //利用Json插件将Array转换成Json格式 
 response.getWriter().print(JSONArray.fromObject(lstTree).toString()); 
 }

②页面使用Ajax获取zTreeNodes数据再生成树

Js代码  

var setting = { 
 isSimpleData : true,  //数据是否采用简单 Array 格式,默认false 
 treeNodeKey : "id",  //在isSimpleData格式下,当前节点id属性 
 treeNodeParentKey : "pId", //在isSimpleData格式下,当前节点的父节点id属性 
 showLine : true,   //是否显示节点间的连线 
 checkable : true   //每个节点上是否显示 CheckBox 
}; 
 
var zTree; 
var treeNodes; 
 
$(function(){ 
 $.ajax({ 
 async : false, 
 cache:false, 
 type: 'POST', 
 dataType : "json", 
 url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径 
 error: function () {//请求失败处理函数 
  alert('请求失败'); 
 }, 
 success:function(data){ //请求成功后处理函数。 
  alert(data); 
  treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes 
 } 
 }); 
 
 zTree = $("#tree").zTree(setting, treeNodes); 
});

 ③最后显示效果

ztree简介_动力节点Java学院整理

【实例三】从后台动态获取数据,树节点提供右键菜单功能

①配置setting:

Js代码 

var url = "/ospm/loginInfo/doGetPrivilegeTree.action"; 
 //zTree基本设置 
 var setting = { 
 async : true, //需要采用异步方式获取子节点数据,默认false 
 asyncUrl : root + url, //当 async = true 时,设置异步获取节点的 URL 地址 ,允许接收 function 的引用 
 asyncParam : ["id"], //提交的与节点数据相关的必需参数 
 isSimpleData : true, //数据是否采用简单 Array 格式,默认false 
 treeNodeKey : "id", //在isSimpleData格式下,当前节点id属性 
 treeNodeParentKey : "parentId", //在isSimpleData格式下,当前节点的父节点id属性 
 nameCol : "privName",  //在isSimpleData格式下,当前节点名称 
 expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义:"slow", "normal", "fast")或 表示动画时长的毫秒数值(如:1000) 
 showLine : true, //是否显示节点间的连线 
 callback : { //回调函数 
  rightClick : zTreeOnRightClick //右键事件 
 } 
 };

②配置鼠标右键事件,显示右键菜单的代码

Js代码  

//显示右键菜单 
 function showRMenu(type, x, y) { 
 $("#rMenu ul").show(); 
 if (type=="root") { 
  $("#m_del").hide(); 
  $("#m_check").hide(); 
  $("#m_unCheck").hide(); 
 } 
 $("#rMenu").css({"top":y+"px", "left":x+"px", "display":"block"}); 
 } 
 //隐藏右键菜单 
 function hideRMenu() { 
 $("#rMenu").hide(); 
 } 
 
 //鼠标右键事件-创建右键菜单 
 function zTreeOnRightClick(event, treeId, treeNode) { 
 if (!treeNode) { 
  zTree.cancelSelectedNode(); 
  showRMenu("root", event.clientX, event.clientY); 
 } else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单 
  if (treeNode.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) { 
  zTree.cancelSelectedNode(); 
  showRMenu("root", event.clientX, event.clientY); 
  } else { 
  zTree.selectNode(treeNode); 
  showRMenu("node", event.clientX, event.clientY); 
  } 
 } 
 }

Js代码  

<p><span style="background-color: #fafafa;"><!-- 右键菜单div --> 
 <div id="rMenu" style="position:absolute; display:none;"> 
 <li> 
 <ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul> 
 <ul id="m_del" onclick="delPrivilege();"><li>删除</li></ul> 
 <ul id="m_del" onclick="editPrivilege();"><li>编辑</li></ul> 
 <ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul> 
 </li> 
 </div></span></p>

 ③页面加载时生成树并且监听鼠标点击事件,及时隐藏右键菜单

Js代码  

function reloadTree() { 
 hideRMenu(); 
 zTree = $("#tree").zTree(setting, treeNodes); 
 } 
 
 var zTree; 
 var treeNodes = []; 
 
 
$(function() { 
 reloadTree(); 
 
 $("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单 
  "mousedown", 
  function(event) { 
   if (!(event.target.id == "rMenu" || $(event.target) 
    .parents("#rMenu").length > 0)) { 
   $("#rMenu").hide(); 
   } 
  }); 
 });

④后台代码根据id获取树节点信息

-----------------------Action层-----------------------

Java代码  

public void doGetPrivilegeTree() throws IOException{ 
 String sId = request.getParameter("id"); 
 int treeId = 0; 
 if(sId!=null&&!"".equals(sId)){ 
  treeId = Integer.parseInt(sId); 
 } 
 List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId); 
 response.setCharacterEncoding("UTF-8"); 
 response.getWriter().print(JSONArray.fromObject(lstPriv).toString()); 
 }

-----------------------Service层-----------------------

Java代码  

/** 
 * 根据节点id,查询其下级节点的数据 
 */ 
 @SuppressWarnings("unchecked") 
 @Override 
 public List<Privilege> findPrivilegeTreeById(int treeId) { 
 StringBuffer sbTree= new StringBuffer(); 
 sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p "); 
 sbTree.append("WHERE p.parentId=:treeId "); 
 sbTree.append("AND p.status!=:del "); 
  
 Map<String,Object> mapTree = new HashMap<String, Object>(); 
 mapTree.put("treeId", treeId); 
 mapTree.put("del", Privilege.PRIV_STATUS_DELETE); 
  
 return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree); 
 }

 ⑤最后查看效果:

ztree简介_动力节点Java学院整理

Javascript 相关文章推荐
javascript 打印内容方法小结
Nov 04 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
javascript头像上传代码实例
Sep 28 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
JavaScript组合继承详解
Nov 07 Javascript
Angular 1.x个人使用的经验小结
Jul 19 #Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 #Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 #Javascript
vue引入swiper插件的使用实例
Jul 19 #Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 #Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 #Javascript
JS设置随机出现2个数字的实例代码
Jul 19 #Javascript
You might like
相对路径转化成绝对路径
2007/04/10 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
vue小白入门教程
2018/04/02 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Django中的cookie和session
2019/08/27 Python
python 表格打印代码实例解析
2019/10/12 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python和Sublime整合过程图示
2019/12/25 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
实习报告评语
2014/04/26 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
创先争优活动心得体会
2014/09/04 职场文书
小学语文教学反思范文
2016/03/03 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android