ztree _ Power Node Java学院整理介绍

[导言]

ZTree是一组Tree插件，可以通过使用JQuery的核心代码来完成大多数常见的功能

ZTree是jQuery实现的多功能“树插件”。出色的性能、灵活的配置、多种功能的组合是zTree最大的优势。

正式文件：http://www.treejs.cn/v3/main.php#_zTreeInfo

兼容IE、FireFox、Chrome等浏览器

一个页面中可以同时生成多个树实例

支持JSON数据

支持一次性静态生成和Ajax异步加载

支持多事件响应和反馈

支持树的节点移动、编辑和删除

支持任何皮肤变化/个性化图标(取决于css)

支持极其灵活的复选框或单选功能

简单的参数配置实现了灵活的功能

[一些功能和属性的介绍]

核心：zTree(设置，[zTreeNodes])

该函数接受一个JSON格式数据对象设置和一个JSON格式数据对象zTreeNodes，从而创建一个树。

核心参数：设置

这里完成了zTree的参数配置。简单来说就是树的样式、事件、访问路径等。都配置在这里

设置示例：

javascript，javascript

var设置={ showLine: true，checkable : true }；因为参数太多，具体参数见zTreeAPI

核心参数：zTreeNodes

zTree所有节点的数据采集采用由Json对象组成的数据结构。简单地说，树的所有信息都以JSON格式保存在这里

zTreeNodes有两种格式：反映父子关系的Json格式嵌套和Array简单格式

父子关系：的标准zTreeNodes示例

javascript，javascript

var zTreeNodes=[ {'id':1，' name':'test1 '，' nodes':[ {'id':11，' name':'test11 '，' nodes':[ {'id':111，' name ' 3: ' test 111 ' }]}，{'id':12，' name ' 3: ' test 12 ' } }，];具有父子关系的简单数组格式的zTreeNodes示例：

javascript，javascript

var treeNodes=[ {'id':1，' pId':0，' name':'test1'}，{'id':11，' pId':1，' name':'test11'}，{'id':12，' pId':1，' name ' : ' test12 ' }，{'id':111，' PiD ' 3333333.];[示例1] (Java代码)

(1)在页面中引用zTree js和css:

Html代码

！- ZTree树插件链接rel='样式表' href='%=根%/web/common/CSS/z trees style/z trees style . CSS ' rel='外部nofollow' type=' text/CSS '！- link rel='样式表' href=' %=root %/Web/common/CSS/ztree style/ztree icons . CSS ' rel='外部nofollow' type='text/css' -脚本类型=' text/Javascript ' src=' http :%=root %/Web/common/js/jquery-z tree-2 . 5 . min . js '/脚本在脚本脚本中定义设置和zTreeNodes

Java代码

varsetting={ Issimpledata : True，//数据是否为简单数组格式，默认为false treeNodeKey : 'id '，///在isSimpleData格式中，当前节点id属性TreenoDepartmentKey :' Pid '，//在isSimpleData格式中，当前节点的父节点id属性showline3360 True，//是否显示节点间的连接checkable 3360 True//是否在每个节点上显示复选框}；var treeNodes=[ {'id':1，' pId':0，' name':'test1'}，{'id':11，' pId':1，' name':'test11'}，{'id':12，' pId':1，' name ' : ' test12 ' }，{'id':111，' PiD ' 3333333进入页面时生成树形结构：

javascript，javascript

var zTreejavascript，javascript

$(function() { zTree=$('#tree '))。zTree(设置，树节点)；});(4)最后检查效果：

[示例2](从后台获取简单格式的Json数据)

(1)后台代码以简单的格式封装Json数据：

Java代码

public void doGetPrivilegeTree()引发IOException { String S1=' { id :1，pId:0，name: \ ' test1 \ '，open : true } '；字符串s2='{id:2，pId:1，name: \ ' test2 \ '，open : true } '；字符串s3='{id:3，pId:1，name: \ ' test3 \ '，open : true } '；字符串s4='{id:4，pId:2，name: \ ' test4 \ '，open : true } '；listString lstree=new ArrayListString()；伊斯特里。添加(S1)；伊斯特里。添加(S2)；伊斯特里。添加(S3)；伊斯特里。添加(S4)；//利用Json插件将排列转换成Json格式response.getWriter().打印(JSonarray。FromObject(lstree)).toString())；} 页面使用埃阿斯获取zTreeNodes数据再生成树

射流研究…代码

定义变量设置={ isSimpleData : true，//数据是否采用简单排列格式，默认false treeNodeKey : 'id '，//在isSimpleData格式下，当前节点编号属性treeNodeParentKey : 'pId '，//在isSimpleData格式下，当前节点的父节点编号属性showLine : true，//是否显示节点间的连线checkable : true //每个节点上是否显示CheckBox }；var zTreevar tree nodes $(function(){ $).ajax({ async : false，cache:false，type: 'POST '，dataType : 'json '，URL : root '/ospm/loginInfo/dogetprivilegetree。操作'，//请求的行为路径错误：函数(){//请求失败处理函数警报('请求失败');}，success:function(数据){ //请求成功后处理函数警报（数据);treeNodes=数据；//把后台封装好的简单Json格式赋给树节点} })；zTree=$('#tree ').zTree(设置，树节点);});最后显示效果

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

配置设置：

射流研究…代码

var URL='/ospm/loginInfo/dogetprivilegetree。动作'；//zTree基本设置定义变量设置={ async : true，//需要采用异步方式获取子节点数据，默认假asyncUrl :根Url，//当异步=真时，设置异步获取节点的统一资源定位器地址，允许接收功能的引用asyncParam : ['id']，//提交的与节点数据相关的必需参数isSimpleData : true，//数据是否采用简单排列格式，默认false treeNodeKey : 'id '，//在isSimpleData格式下，当前节点编号属性treeNodeParentKey : ' parentId '，//在isSimpleData格式下，当前节点的父节点编号属性nameCol : 'privName '，//在isSimpleData格式下，当前节点名称expandSpeed : 'fast '，//设置zTree节点展开、折叠时的动画速度或取消动画（三种默认定义："慢"、"正常"、"快")或表示动画时长的毫秒数值（如：1000) showLine : true，//是否显示节点间的连线回拨： { //回调函数右键单击： zTreeOnRightClick //右键事件} };配置鼠标右键事件，显示右键菜单的代码

射流研究…代码

//显示右键菜单函数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 ' })；} //隐藏右键菜单函数hideRMenu() { $('#rMenu ').hide()；} //鼠标右键事件-创建右键菜单函数zTreeOnRightClick(事件、treeId、treeNode) { if(！树节点){ ztree。cancel selected node()；showRMenu('root '，event.clientX，event。客户关系)；} else if (treeNode！treeNode.noR) { //noR属性为真实的表示禁止右键菜单if(treenode。新角色事件。目标。标记名！='a' $(event.target).父母(' a ').长度==0){ ztree。cancelselected node()；showRMenu('root '，event.clientX，event。客户关系)；} else { ztree。selectnode(树节点)；showRMenu('node '，event.clientX，event。客户关系)；} } } Js代码

PS pan style='底色： # fafafa'！-右键菜单div-div id=' rMenu ' style=' position : absolute；display : none ' Li ul id=' m _ add ' onclick=' addPrivilege()；'里增加/Li/ul ul ul id=' m _ del ' onclick=' DelPrivate()；'里删除/Li/ul ul ul id=' m _ del ' onclick=' editPrivilege()；'里编辑/Li/ul ul ul id=' m _ del ' onclick=' queryPrivilege()；'里查看/li/ul /li /div/span/p 页面加载时生成树并且监听鼠标点击事件，及时隐藏右键菜单

射流研究…代码

函数ReLoadTree(){ HiderMenu()；zTree=$('#tree ').zTree(设置，树节点);} var zTreevar树节点=[]；$(function(){ ReLoadTree()；$(“正文”).绑定(//鼠标点击事件不在节点上时隐藏右键菜单鼠标向下'，函数（事件){ if(！(事件。目标。id==' rMenu ' | | $(事件。目标).父母(' #rMenu ').长度0)) { $('#rMenu ').hide()；} });});后台代码根据编号获取树节点信息

-行动层-

爪哇代码

public void doGetPrivilegeTree()引发IOException { String SiD=请求。getParameter(' id ')；int TreeID=0；if(sId！=null！''.等于(SiD)){ TreeID=整数。parse int(SiD)；}列表权限lstPriv=privilegeservice。find privilegerebyid(treeId)；回应。setcharacter encoding(' UTF-8 ')；response.getWriter().打印(JSonarray。FromObject(lstPriv)).toString())；} -服务层-

爪哇代码

/** * 根据节点id，查询其下级节点的数据*/@SuppressWarnings('未选中)@覆盖公共列表权限findbriliegetreebyid(int treeId){ StringBuffer sbTree=new StringBuffer()；sbtree。追加(' SELECT NEW Privilege(p . id，p.privName，p.description，p.status，p.isLeaf，p . parentid)FROM Privilege p ')；sbtree。追加(' WHERE p . parentid=: treeid ')；sbTree.append('AND p.status！=: del’；MapString，Object mapTree=new HashMapString，Object()；mapTree.put('treeId '，treeId)；mapTree.put('del '，特权PRIV _ STATUS _ DELETE)；return(列表特权)privilegedao。findbyhql(sbtree。tostring()、MapTree)；} 最后查看效果：