zTree 基本用法
【简介】
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
- 兼容 IE、FireFox、Chrome 等浏览器
- 在一个页面内可同时生成多个 Tree 实例
- 支持 JSON 数据
- 支持一次性静态生成 和 Ajax 异步加载 两种方式
- 支持多种事件响应及反馈
- 支持 Tree 的节点移动、编辑、删除
- 支持任意更换皮肤 / 个性化图标(依靠css)
- 支持极其灵活的 checkbox 或 radio 选择功能
- 简单的参数配置实现 灵活多变的功能
zTree地址:http://www.ztree.me/v3/main.php
https://github.com/zTree
在官网能够下载到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简单格式
①带有父子关系的标准 zTreeNodes 举例:
- var zTreeNodes = [
- {"id":1, "name":"test1", "nodes":[
- {"id":11, "name":"test11", "nodes":[
- {"id":111, "name":"test111"}
- ]},
- {"id":12, "name":"test12"}
- ]},
- ......
- ];
②带有父子关系的简单 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代码)
①在页面引用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>
②在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"},
- ];
③在进入页面时生成树结构:
- var zTree;
- $(function() {
- zTree = $("#tree").zTree(setting, treeNodes);
- });
④最后查看效果:
【实例二】(从后台获取简单格式Json数据)
①后台代码封装简单格式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());
- }
②页面使用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);
- });
③最后显示效果
【实例三】从后台动态获取数据,树节点提供右键菜单功能
①配置setting:
- 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 //右键事件
- }
- };
②配置鼠标右键事件,显示右键菜单的代码
- //显示右键菜单
- 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 基本用法的更多相关文章
- js zTree的用法
代码如下: <script type="text/javascript"> var reginTree = { setting: { view ...
- jQuery Ztree基本用法
1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...
- jq生成目录文件树jQuery Ztree基本用法
转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...
- ztree的用法
哎哟,好久没写什么这个虽然没人看的博客了,其实这段时间情绪非常低谷,就没有写博客了,不过我还是回来了,回到正题,在前端页面编程的时候,我们经常用到树状,用原始的树状呢,功能没有那么强大,所以这个时候 ...
- Ztree使用教程
这两天项目需要写一个树形帮助,学习了我们项目组的老师的Ztree的树的写法,实现了这个帮助,下面来总结一下Ztree的用法. (也是参考的一篇csdn上的博客了) zTree 是一个依靠 jQuery ...
- zTree静态树与动态树的用法——(七)
0.[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实 ...
- Ztree节点增加删除修改和Icheck的用法
简介 官方文档:http://www.treejs.cn/v3/api.php zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定 ...
- zTree 用法小例
插件地址:链接:http://pan.baidu.com/s/1jHVtyZ0 密码:7kee <select id="getTree" resultType="j ...
- 树 插件 ztree 的基本用法
因业务需要 用到 ztree 插件 第一次用tree插件上手有点难度 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 第一步:初始化树,树的所有数据从后台 ...
随机推荐
- Python 2 和 Python 3 主要区别有哪些(1)
Guido(Python之父,仁慈的独裁者)在设计 Python3 的过程中,受一篇文章 “Python warts” 的影响,决定不向后兼容,否则无法修复大多数缺陷.---摘录自<流畅的Pyt ...
- 【Codeforces 1051D】Bicolorings
[链接] 我是链接,点我呀:) [题意] 题意 [题解] dp[i][j][k]表示前i列,有j个联通块下,最后一列的状态为k的方案数 k如果为1的话,表示最后一列两个块不一样,k如果为0表示一样 枚 ...
- selenium启动chrome出错处理:Message: 'chromedriver' executable needs to be in PATH
- XTU 二分图和网络流 练习题 J. Drainage Ditches
J. Drainage Ditches Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d Ja ...
- Oracle 释放过度使用的Undo表空间
故障现象:UNDO表空间越来越大,长此下去最终数据因为磁盘空间不足而崩溃: 问题分析:产生问题的原因主要以下两点: 1. 有较大的事务量让Oracle Undo自动扩展,产生过度占用磁盘空间的情况: ...
- JS把数字金额转换成中文大写数字的函数
//把数字金额转换成中文大写数字的函数 function num2rmb ($num){ $c1="零壹贰叁肆伍陆柒捌玖"; $c2="分角元拾佰仟万拾佰仟亿" ...
- BZOJ 3884 拓展欧拉定理
3884: 上帝与集合的正确用法 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 4142 Solved: 1907[Submit][Status][D ...
- codechef Polo the Penguin and the Tree
一般xor 的题目都是用trie解决. 那这道题是在树上的trie; 首先:从root==1,遍历树得到1到所有节点的xor 值. 然后对于每个点我们把其插入二进制树中. 对于每一个点查找其二进值异或 ...
- Codeforces 954 D Fight Against Traffic
Discription Little town Nsk consists of n junctions connected by m bidirectional roads. Each road co ...
- mysql查看存储过程show procedure status;
1.mysql查看存储过程(函数) 2.MySQL查看触发器 查看触发器 语法:SHOW TRIGGERS [FROM db_name] [LIKE expr] 实例:SHOW TRIGGERS\G ...