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压缩工具下载集合
Mar 06 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python生成随机图形验证码详解
2017/11/08 Python
用python实现的线程池实例代码
2018/01/06 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python docx库用法示例分析
2019/02/16 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
python怎么自定义捕获错误
2020/06/29 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
副总经理任命书
2014/06/05 职场文书
安全口号大全
2014/06/21 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android