Jquery-zTree的基本用法
【简介】
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件
- 兼容 IE、FireFox、Chrome 等浏览器
- 在一个页面内可同时生成多个 Tree 实例
- 支持 JSON 数据
- 支持一次性静态生成 和 Ajax 异步加载 两种方式
- 支持多种事件响应及反馈
- 支持 Tree 的节点移动、编辑、删除
- 支持任意更换皮肤 / 个性化图标(依靠css)
- 支持极其灵活的 checkbox 或 radio 选择功能
- 简单的参数配置实现 灵活多变的功能
【部分函数和属性介绍】
- 核心: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:
②配置鼠标右键事件,显示右键菜单的代码
- <p><span style="#fafafa;"><!-- 右键菜单div -->
- <div id="rMenu" style="position:absolute; display:none;">
- <li>
- <ul id="m_add" onclick="addPrivilege();"><li>增加</li></ul>
- <ul id="m_del" onclick="delPrivilege();"><li>删除</li></ul>
- <ul id="m_del" onclick="editPrivilege();"><li>编辑</li></ul>
- <ul id="m_del" onclick="queryPrivilege();"><li>查看</li></ul>
- </li>
- </div></span></p>
③页面加载时生成树并且监听鼠标点击事件,及时隐藏右键菜单
- function reloadTree() {
- hideRMenu();
- zTree = $("#tree").zTree(setting, treeNodes);
- }
- var zTree;
- var treeNodes = [];
- $(function() {
- reloadTree();
- $("body").bind(//鼠标点击事件不在节点上时隐藏右键菜单
- "mousedown",
- function(event) {
- if (!(event.target.id == "rMenu" || $(event.target)
- .parents("#rMenu").length > 0)) {
- $("#rMenu").hide();
- }
- });
- });
④后台代码根据id获取树节点信息
-----------------------Action层-----------------------
- public void doGetPrivilegeTree() throws IOException{
- String sId = request.getParameter("id");
- int treeId = 0;
- if(sId!=null&&!"".equals(sId)){
- treeId = Integer.parseInt(sId);
- }
- List<Privilege> lstPriv = privilegeService.findPrivilegeTreeById(treeId);
- response.setCharacterEncoding("UTF-8");
- response.getWriter().print(JSONArray.fromObject(lstPriv).toString());
- }
-----------------------Service层-----------------------
- /**
- * 根据节点id,查询其下级节点的数据
- */
- @SuppressWarnings("unchecked")
- @Override
- public List<Privilege> findPrivilegeTreeById(int treeId) {
- StringBuffer sbTree= new StringBuffer();
- sbTree.append("SELECT NEW Privilege(p.id,p.privName,p.description,p.status,p.isLeaf,p.parentId) FROM Privilege p ");
- sbTree.append("WHERE p.parentId=:treeId ");
- sbTree.append("AND p.status!=:del ");
- Map<String,Object> mapTree = new HashMap<String, Object>();
- mapTree.put("treeId", treeId);
- mapTree.put("del", Privilege.PRIV_STATUS_DELETE);
- return (List<Privilege>) privilegeDao.findByHql(sbTree.toString(), mapTree);
- }
⑤最后查看效果:
Jquery-zTree的基本用法的更多相关文章
- Jquery zTree的使用
<%@ page language="java" pageEncoding="utf-8"%><%@taglib prefix="s ...
- 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用
1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf' ...
- C#使用Jquery zTree实现树状结构显示_异步数据加载
JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面: http://www.treejs.cn/v3/dem ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery.zTree的跳坑记录
最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
随机推荐
- 一个公网地址部署LVS/DR模式
http://blog.chinaunix.net/uid-7411781-id-3436142.html 一个公网地址部署LVS/DR模式 网上看了很多关于LVS的文章,在选取2种模式LVS/D ...
- Playing with ptrace, Part II
Playing with ptrace, Part II Issue From Issue # December Dec , By Pradeep Padala inSysAdmin In Part ...
- SQL SERVER中架构的理解
在sqlserver 2005中,可能大家在工作或学习的时候会经常发现这样一些问题,你使用一个账户在数据库中创建了一张表,却发现你自己创建的表却没有修改和查询的权限,这是一件很郁闷的事情,在sqlse ...
- tar --help
pengdl@debian:~/test$ mkdir test1 pengdl@debian:~/test$ mkdir test2 pengdl@debian:~/test$ tar -xzf p ...
- Asp.Net 之 通过调用 WScript.Shell 启动本地 exe 程序时产生“ automation服务器不能创建对象 ”的错误
我们经常需要通过生成 ActiveXObject("WScript.Shell"); 来调用某一exe文件. 设置网页打印的页眉页脚为空: var HKEY_Root,HKEY_P ...
- shell判断一个变量是否为空
判断一个变量是否为空 . 1. 变量通过" "引号引起来 如下所示:,可以得到结果为 IS NULL. #!/bin/sh para1= if [ ! -n "$para ...
- cocos2d-x中使用Http
一.如何使用 //发送接口 void CmdHelper::postRequest(const char* cmdTag, const char* url, const char* postData, ...
- Ubuntu环境下配置Nginx
/etc/nginx目录文件下: drwxr-xr-x 5 root root 4096 Apr 27 12:47 ./ drwxr-xr-x 104 root root 4096 Apr 27 ...
- linux 安装GCC
研究生阶段已经开始了一段时间了,选了LINUX深入分析,之前没怎么接触过,感觉还是有点难度的.不,好像是很难. 从学校借了一台电脑,安装了UBUNTU12.04的系统,可是不知道怎么地,这个系统里,没 ...
- linux云计算集群架构学习笔记:rhel7基本命令操作
1-3-RHEL7基本命令操作 1.1Linux终端介绍 Shell提示符 Bash Shell基本语法. 1.2基本命令的使用:ls.pwd.cd. 1.3查看系统和BIOS硬件时间. 1.4 L ...