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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php备份数据库类分享
2015/04/14 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python中字符串的编码与解码详析
2020/12/03 Python
JDO的含义
2012/11/17 面试题
建筑工程技术应届生求职信
2013/11/17 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫