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

【简介】

ztree 是利用 jquery 的核心代码，实现一套能完成大部分常用功能的 tree 插件

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

官方文档：

 兼容 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); 
 });

④最后查看效果：

【实例二】(从后台获取简单格式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); 
});

③最后显示效果

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

①配置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); 
 }

⑤最后查看效果：