Z-Tree的应用

【简介】zTree是利用JQuery的核心代码，实现一套能完成大部分常用功能的Tree插件兼容IE、FireFox、Chrome等浏览器在一个页面内可同时生成多个Tree实例支持JSON数据支持一次性静态生成和Ajax异步加载两种方式支持多种事件响应及反馈支持Tree的节点移动、编辑、删除支持任意更换皮肤/个性化图标（依靠css）支持极其灵活的checkbox或radio选择功能简单的参数配置实现灵活多变的功能【Z-Tree的部分函数和属性介绍】核心：zTree(setting,[zTreeNodes])这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立Tree。核心参数：settingzTree的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置setting举例:Js代码1.varsetting={2.showLine:true,3.checkable:true4.};核心参数：zTreeNodeszTree的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式①带有父子关系的标准zTreeNodes举例:Js代码1.varzTreeNodes=[2.{id:1,name:test1,nodes:[3.{id:11,name:test11,nodes:[4.{id:111,name:test111}5.]},6.{id:12,name:test12}7.]},8.......9.];②带有父子关系的简单Array格式(isSimpleData)的zTreeNodes举例：Js代码1.vartreeNodes=[2.{id:1,pId:0,name:test1},3.{id:11,pId:1,name:test11},4.{id:12,pId:1,name:test12},5.{id:111,pId:11,name:test111},6.......7.];【实例一】(Java代码)①在页面引用zTree的js和css：Html代码1.!--ZTree树形插件--2.linkrel=stylesheethref=%=root%/Web/common/css/zTreeStyle/zTreeStyle.csstype=text/css3.!--linkrel=stylesheethref=%=root%/Web/common/css/zTreeStyle/zTreeIcons.csstype=text/css--4.scripttype=text/javascriptsrc=%=root%/Web/common/js/jquery-ztree-2.5.min.js/script②在script脚本中定义setting和zTreeNodesJava代码1.varsetting={2.isSimpleData:true,//数据是否采用简单Array格式，默认false3.treeNodeKey:id,//在isSimpleData格式下，当前节点id属性4.treeNodeParentKey:pId,//在isSimpleData格式下，当前节点的父节点id属性5.showLine:true,//是否显示节点间的连线6.checkable:true//每个节点上是否显示CheckBox7.};8.9.vartreeNodes=[10.{id:1,pId:0,name:test1},11.{id:11,pId:1,name:test11},12.{id:12,pId:1,name:test12},13.{id:111,pId:11,name:test111},14.];③在进入页面时生成树结构：Js代码1.varzTree;Js代码1.$(function(){2.zTree=$(#tree).zTree(setting,treeNodes);3.});④最后查看效果：【实例二】(从后台获取简单格式Json数据)①后台代码封装简单格式Json数据：Java代码1.publicvoiddoGetPrivilegeTree()throwsIOException{2.Strings1={id:1,pId:0,name:\test1\,open:true};3.Strings2={id:2,pId:1,name:\test2\,open:true};4.Strings3={id:3,pId:1,name:\test3\,open:true};5.Strings4={id:4,pId:2,name:\test4\,open:true};6.ListStringlstTree=newArrayListString();7.lstTree.add(s1);8.lstTree.add(s2);9.lstTree.add(s3);10.lstTree.add(s4);11.//利用Json插件将Array转换成Json格式12.response.getWriter().print(JSONArray.fromObject(lstTree).toString());13.}②页面使用Ajax获取zTreeNodes数据再生成树Js代码1.varsetting={2.isSimpleData:true,//数据是否采用简单Array格式，默认false3.treeNodeKey:id,//在isSimpleData格式下，当前节点id属性4.treeNodeParentKey:pId,//在isSimpleData格式下，当前节点的父节点id属性5.showLine:true,//是否显示节点间的连线6.checkable:true//每个节点上是否显示CheckBox7.};8.9.varzTree;10.vartreeNodes;11.12.$(function(){13.$.ajax({14.async:false,15.cache:false,16.type:'POST',17.dataType:json,18.url:root+/ospm/loginInfo/doGetPrivilegeTree.action,//请求的action路径19.error:function(){//请求失败处理函数20.alert('请求失败');21.},22.success:function(data){//请求成功后处理函数。23.alert(data);24.treeNodes=data;//把后台封装好的简单Json格式赋给treeNodes25.}26.});27.28.zTree=$(#tree).zTree(setting,treeNodes);29.});③最后显示效果【实例三】从后台动态获取数据，树节点提供右键菜单功能①配置setting：Js代码1.varurl=/ospm/loginInfo/doGetPrivilegeTree.action;2.//zTree基本设置3.varsetting={4.async:true,//需要采用异步方式获取子节点数据,默认false5.asyncUrl:root+url,//当async=true时，设置异步获取节点的URL地址,允许接收function的引用6.asyncParam:[id],//提交的与节点数据相关的必需参数7.isSimpleData:true,//数据是否采用简单Array格式，默认false8.treeNodeKey:id,//在isSimpleData格式下，当前节点id属性9.treeNodeParentKey:parentId,//在isSimpleData格式下，当前节点的父节点id属性10.nameCol:privName,//在isSimpleData格式下，当前节点名称11.expandSpeed:fast,//设置zTree节点展开、折叠时的动画速度或取消动画(三种默认定义：slow,normal,fast)或表示动画时长的毫秒数值(如：1000)12.showLine:true,//是否显示节点间的连线13.callback:{//回调函数14.rightClick:zTreeOnRightClick//右键事件15.}16.};②配置鼠标右键事件，显示右键菜单的代码Js代码1.//显示右键菜单2.functionshowRMenu(type,x,y){3.$(#rMenuul).show();4.if(type==root){5.$(#m_del).hide();6.$(#m_check).hide();7.$(#m_unCheck).hide();8.}9.$(#rMenu).css({top:y+px,left:x+px,display:block});10.}11.//隐藏右键菜单12.functionhideRMenu(){13.$(#rMenu).hide();14.}15.16.//鼠标右键事件-创建右键菜单17.functionzTreeOnRightClick(event,treeId,treeNode){18.if(!treeNode){19.zTree.cancelSelectedNode();20.showRMenu(root,event.clientX,event.clientY);21.}elseif(treeNode&&!treeNode.noR){//noR属性为true表示禁止右键菜单22.if(treeNode.newrole&&event.target.tagName!=a&&$(event.target).parents(a).length==0){23.zTree.cancelSelectedNode();24.showRMenu(root,event.clientX,event.clientY);25.}else{26.zTree.selectNode(treeNode);27.showRMenu(node,event.clientX,event.clientY);28.}29.}30.}Js代码1.pspanstyle=background-color:rgb(250,250,250);!--右键菜单div--2.divid=rMenustyle=position:absolute;display:none;3.li4.ulid=m_addonclick=addPrivilege();li增加/li/ul5.ulid=m_delonclick=delPrivilege();li删除/li/ul6.ulid=m_delonclick=editPrivilege();li编辑/li/ul7.ulid=m_delonclick=queryPrivilege();li查看/li/ul8./li9./div/span/p③页面加载时生成树并且监听鼠标点击事件，及时隐藏右键菜单Js代码1.functionreloadTree(){2.hideRMenu();3.zTree=$(#tree).zTree(setting,treeNodes);4.}5.6.varzTree;7.vartreeNodes=[];8.9.10.$(function(){11.reloadTree();12.13.$(body).bind(//鼠标点击事件不在节点上时隐藏右键菜单14.mousedown,15.function(event){16.if(!(event.target.id==rMenu||$(event.target)17..parent