ztree简介_动力节点Java学院整理
【简介】
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); });
④最后查看效果:
【实例二】(从后台获取简单格式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); }
⑤最后查看效果:
上一篇: js实现水平滚动菜单导航