欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-24 10:10:19
【简介】 ztree 是利用 jquery 的核心代码,实现一套能完成大部分常用功能的 tree 插件 ztree是一个依靠jquery实现的多功能“树插件”。优异的性...

【简介】

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学院整理