Jquery zTree实例
zTree【简单介绍】
zTree 是利用 JQuery 的核心代码,实现一套能完毕大部分经常使用功能的 Tree 插件
兼容 IE、FireFox、Chrome 等浏览器
在一个页面内可同一时候生成多个 Tree 实例
支持 JSON 数据
支持一次性静态生成 和 Ajax 异步载入 两种方式
支持多种事件响应及反馈
支持 Tree 的节点移动、编辑、删除
支持随意更换皮肤 / 个性化图标(依靠css)
支持极其灵活的 checkbox 或 radio 选择功能
简单的參数配置实现 灵活多变的功能
【官网】
官网地址:http://www.baby666.cn/hunter/index.html
在官网可下面载到zTree的源代码、实例和API,当中作者pdf的API写得很具体
【部分函数和属性介绍】
核心:zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes,从而建立 Tree。
核心參数:setting
zTree 的參数配置都在这里完毕,简单的说:树的样式、事件、訪问路径等都在这里配置
setting 举例:
var setting = {
showLine: true,
checkable: true
};
由于參数太多,详细參数详见zTreeAPI
核心參数:zTreeNodes
zTree 的所有节点数据集合,採用由JSON对象组成的数据结构,简单的说:这里使用Json格式保存了树的所有信息
zTreeNodes的格式分为两种:利用Json格式嵌套体现父子关系和Array简单格式
1 带有父子关系的标准 zTreeNodes 举例:
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......
];
2 带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例:
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代码)
1. 在页面引用zTree的js和css:
<!-- ZTree树形插件 -->
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
2. 在script脚本中定义setting和zTreeNodes
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"},
];
3. 在进入页面时生成树结构:
var zTree;
$(function() {
zTree = $("#tree").zTree(setting, treeNodes);
});
4. 最后查看效果:
【实例二】(从后台获取简单格式Json数据)
1. 后台代码封装简单格式Json数据:
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());
}
2. 页面使用Ajax获取zTreeNodes数据再生成树
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);
});
3. 最后显示效果
Jquery zTree实例的更多相关文章
- jQuery zTree v3.5 实例3 异步树
最终效果: 点击非叶子节点时,向后台发送请求,获取下级菜单 前台代码如下: <%@ page language="java" contentType="text/h ...
- jquery Ztree v3.5 实例2 自定义显示在节点前的图片
显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- jQuery+zTree
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- jQuery.zTree的跳坑记录
最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
随机推荐
- POJ 1384 Piggy-Bank 背包DP
所谓的全然背包,就是说物品没有限制数量的. 怎么起个这么intimidating(吓人)的名字? 事实上和一般01背包没多少差别,只是数量能够无穷大,那么就能够利用一个物品累加到总容量结尾就能够了. ...
- Alamofire网络库基础教程
原文 Beginning Alamofire Tutorial 原文作者 Essan Parto译者 星夜暮晨(QQ:412027805) http://www.jianshu.com/p/f1208 ...
- 什么是Cyclomatic Complexity(圈复杂度)?
Campwood Software SourceMonitor Version 3.5 The freeware program SourceMonitor lets you see inside y ...
- 基于高性能的硬件配置Nginx
Nginx高级配置将涉及硬件,假设你配置不好,直接使各种性能下降. 我这里总结一下.怎样依据server的硬件设备来配置Nginx. 见下图: 低訪问量的网络,能够这样配置. 标准的网络訪问量,能够这 ...
- MongoDB CRUD 基础知识
建立一个良好的发展环境 环境win8 x64,下载并安装省略.经mongodb 的bin文件夹增加windows的path中,为以后使用方便. c盘新建存储目录:c:/data/db 执行服务:WIN ...
- LayoutDemo
package swing.ui; import java.awt.BorderLayout; import java.awt.GridLayout; import javax.swing.JButt ...
- Cocos2d-x 3.2 Lua演示样本CocosDenshionTest(音频测试)
Cocos2d-x 3.2 Lua演示样本CocosDenshionTest(音频测试) 本篇博客介绍Cocos2d-x 3.2中Lua演示样例的音频測试.Cocos2d-x使用SimpleAudi ...
- Android 中字体的处理
//得到TextView控件对象 TextView textView = (TextView)findViewById(R.id.custom); //将字体文件保存在assets/fonts/文件夹 ...
- SDL2来源分析7:演出(SDL_RenderPresent())
===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...
- 使用智能移动设备访问Ossim制
使用智能移动设备访问Ossim制 下面我们用iPad,iPhone通路ossim效果系统. 高清视频:http://www.tudou.com/programs/view/TikMZ1z1ELw ip ...