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 对象成员的可见性说明
Oct 16 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
layui实现table加载的示例代码
Aug 14 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
PHP学习之PHP运算符
2006/10/09 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
公司前台辞职报告
2014/01/19 职场文书
小学毕业感言500字
2014/02/28 职场文书
男女朋友协议书
2014/04/23 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书