Jquery 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实例相关推荐
- 表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
- jquery ztree异步搜索
一.初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = {async: {enable: true, url: ...
- jQuery zTree几种常用的使用方式
最近在用这个ztree进行项目中的某些功能的开发.所以这里就随笔记录一下.顺便为我那菜的无地自容地JavaScript做点笔记. 什么是 ZTree 官方简介: zTree 是一个依靠 jQuery ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
- java中jquery怎么学,jQuery动画+实例
1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...
- jQuery Ajax 实例 全解析(转)
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
- oracle 生成目录树,jQuery zTree插件快速实现目录树
ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网 只要引入jquery和ztree的库js,然后给 ...
- jQuery Ajax 实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
- j2ee 简单网站搭建:(十)jquery ztree 插件使用入门
为什么80%的码农都做不了架构师?>>> <j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目> < ...
最新文章
- 电动车逆变器的基础知识
- 定义员工类,职工类,管理类
- php连接数据库提示could not find driver 问题解决
- Web前端开发笔记——第二章 HTML语言 第九节 框架标签、脚本标签
- 【网络设计_RegNet】Designing Network Design Spaces_2020
- Unity URP世界空间后处理扫描圈效果Shader
- 美团酒旅起源数据治理平台的建设与实践
- 如何调节电脑显示屏来保护双眼的小技巧
- 网站长尾关键词优化指南
- 50道编程题(有精力的同学看看)
- 微信小程序商城有发展机会吗?
- 达梦数据库基础优化分享
- FPGA中usb-blaster驱动的安装
- PHP利用qq邮箱发邮件
- WIN10创建虚拟桌面
- 集成安装光盘制作教程(http://bbs.deepin.org/viewthread.php?tid=1170144)
- 计算机网络中型网吧规划设计,中小型网咖网络规划设计开题报告
- 脑机接口的过去、现在与未来
- 轻松玩转微信公众号排版
- 【BLE】CC2541之OAD