最近在用这个ztree进行项目中的某些功能的开发。所以这里就随笔记录一下。顺便为我那菜的无地自容地JavaScript做点笔记。

什么是 ZTree

官方简介： zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。官网地址： www.treejs.cn

好了，接下来进入正题。记录几种ztree常用的方式，本文章中记录的使用方式不代表所有使用方式，仅为本人所使用到的几种方式。

一、作为侧边的菜单使用

这是最简单的一种，也是最常用的一种使用方式

结构中的css，js均为为ztree官方的。JQuery使用的2.0.3。官方说的理论上1.3+版本的JQery都可以使用的。www.treejs.cn/v3/faq.php#…

前端代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-2.0.3.min.js"></script><link rel="stylesheet" href="css/zTreeStyle.css" /><script type="text/javascript" src="js/jquery.ztree.core.js" ></script><style type="text/css">ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;/*  width: 220px; */height: 600px;overflow-y: scroll;overflow-x: auto;
}.box{width: 200px;}</style></head><body><div class="box"><ul id="tree" class="ztree"></ul></div></body><script type="text/javascript">var setting = {data: {simpleData: {enable: true}}};var data = [{id: 1,pId: 0,name: "父节点1",open:true,//该节点默认打开},{id: 11,pId: 1,name: "子节点1",},{id: 12,pId: 1,name: "子节点2"}];$(document).ready(function() {$.fn.zTree.init($("#tree"), setting, data);});</script></html>
复制代码

如果你是用SpringMVC进行进行数据请求的话，可以这样进行数据请求。

1.数据表结构：

id 主键id，name 名称，parentId父id 1——alex——0 2——join——1 3——alan——2 4——bill——1

2.Controller

 @RequestMapping("tree")@ResponseBodypublic String tree() throws Exception {List<Object> listmap = new ArrayList<>();Map<String, Object> itemmap = new HashMap<>()List<Info> result = InfoService.getAllInfo();if (result != null) {for (Iterator iterator = result.iterator(); iterator.hasNext(); ) {Info item = (Info) iterator.next();itemmap = new HashMap<>();itemmap.put("id", item.getId());itemmap.put("name", item.getName());itemmap.put("pId", item.getParentId());itemmap.put("open", "true");//默认节点展开//点击节点后触发的事件。事件具体方式请看jsitemmap.put("click", "getInfoId(" + item.getId() + ")");listmap.add(itemmap);}}//这里使用的java自带的json转换器 net.sf.json.JSONArray;JSONArray array = JSONArray.fromObject(listmap);return array.toString();}}
复制代码

3.Html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-2.0.3.min.js"></script><link rel="stylesheet" href="css/zTreeStyle.css" /><script type="text/javascript" src="js/jquery.ztree.core.js" ></script><style type="text/css">ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;/*  width: 220px; */height: 600px;overflow-y: scroll;overflow-x: auto;
}.box{width: 200px;}</style></head><body><div class="box"><ul id="tree" class="ztree"></ul></div></body><script type="text/javascript">var setting = {data: {simpleData: {enable: true}}};//请求controller获取数据$(document).ready(function () {jQuery.ajax({url: "info/tree",type: "POST",dataType: "json",contentType: "application/json; charset=utf-8",success: function (data) {$.fn.zTree.init($("#tree"), setting, data);}});});//点击节点的onclick事件function getInfoId(id) {alter(id);}</script></html>
复制代码

二、作为控件调用

作为控件使用时，为了保证高复用性，所以需要把原来使用id进行绑定的方式改为使用this对当前对象进行绑定。此用法在官方文档中未提及，所以自己修改ztree部分代码进行实现。js技术比较菜，勿喷。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-2.0.3.min.js"></script><link rel="stylesheet" href="css/zTreeStyle.css" /><script type="text/javascript" src="js/jquery.ztree.core.js"></script><style type="text/css">ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;/*   width: 220px; */height: 600px;overflow-y: scroll;overflow-x: auto;}.box {width: 200px;}</style></head><body><!--控件1--><input type="text" name="name_1" onclick="showMenuCall(this); return false;" readonly="readonly" placeholder='控件1' /><input type="text" name="id_1" style="display:none"/><!--控件2--><input type="text" name="name_2" onclick="showMenuCall(this); return false;" readonly="readonly" placeholder='控件2' /><input type="text" name="id_2" style="display:none"/><!--树形菜单--><div id="menuContentCall" style="display: none;z-index: 10000;position: absolute;margin-top: 10px;"><ul id="tree" class="ztree" style="width: 200px"></ul></div></body><script type="text/javascript">var data = [{id: 1,pId: 0,name: "alex",open: true, //该节点默认打开},{id: 2,pId: 1,name: "join",},{id: 3,pId: 2,name: "alan",},{id: 4,pId: 1,name: "bill"}];//重置当前对象var thisObj = new Object();var setting = {view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClickCall,onClick: onClickCall}}function beforeClickCall(treeId, treeNode) {var checkCall = (treeNode || treeNode.isParent);return checkCall;}function onClickCall(e, treeId, treeNode) {$(thisObj).next().attr("value", treeNode.id);$(thisObj).attr("value", treeNode.name);hideMenuCall();}function showMenuCall(c) {thisObj = c;$("#menuContentCall").css({left: 0 + $(c).offset().left + "px", top: 0 + $(c).offset().top + $(c).outerHeight() + "px"}).fadeIn("fast");$("body").bind("mousedown", onBodyDownCall);}function hideMenuCall() {$("#menuContentCall").fadeOut("fast");$("body").unbind("mousedown", onBodyDownCall);thisObj = new Object();}function onBodyDownCall(event) {if (!(event.target.id == "menuBtn" || event.target.id == "menuContentCall" || $(event.target).parents("#menuContentCall").length > 0)) {hideMenuCall();}}$(document).ready(function () {$.fn.zTree.init($("#tree"), setting, data);hideMenuCall()});//使用ajax请求后端返回数据初始化ztree
/**$(document).ready(function () {jQuery.ajax({url: "info/tree",type: "POST",dataType: "json",contentType: "application/json; charset=utf-8",success: function (data) {$.fn.zTree.init($("#tree"), setting, data);hideMenuCall()}});});
**/</script></html>
复制代码

三、作为左侧菜单使用

将zTree作为左侧菜单使用，点击菜单中的zTree节点，对右侧的页面进行相应的刷新。如右侧默认显示的列表，点击左侧的节点后，将右侧页面刷新为编辑页面。

1.在后台封装zTree数据时，添加一个click事件，具体操作看上面第一个使用方式中的Controller代码中如何封装的个click事件。

2.html页面中的右侧部分最大包裹的div 增加一个idcontentBody。如：

<!--左侧的ztree-->
<div class="box"><ul id="tree" class="ztree"></ul>
</div><!--右侧的内容-->
<div id="contentBody">右侧的列表
</div><script>function FileCatalogueListByClassifyId(id) {$.ajax({url: "editController",data: "infoId=" + id,type: "POST",success: function (msg) {//关键代码$("#contentBody").html($(msg).find("#contentBody").html());}})};
</script>
复制代码

edit页面

<div id="contentBody">编辑页面的内容
</div>
复制代码

执行js方法后的页面

<!--左侧的ztree-->
<div class="box"><ul id="tree" class="ztree"></ul>
</div><!--右侧的内容-->
<div id="contentBody">编辑页面的内容
</div>
复制代码

原理：通过后台封装的ztree的click事件进行ajax请求，请求editController方法，跳转到edit页面。然后使用js将原本页面右侧id为contentBody包含的内容替换为edit页面中id为contentBody包含的内容。

转载请注明出处及作者，谢谢。 Create By Hiseico

掘金个人主页

jQuery zTree几种常用的使用方式相关推荐

java regex match 替换_java正则表达式四种常用的处理方式（匹配、分割、替代、获取）...
java 正则表达式高级篇,介绍四种常用的处理方式:匹配.分割.替代.获取,具体内容如下 package test; import java.util.regex.Matcher; import ja ...
MATLAB的几种常用出图方式
MATLAB的几种常用出图方式最近写文经常使用MATLAB绘图.出图,略作总结以备以后使用. 一.图片来源-MATLAB绘图或者读取文件 1.绘图绘图不写了,根据需要选取函数作图吧,这里给个简单的 ...
几种常用接口调用方式
个人总结下几种常用的接口调用方式,具体看对方提供的是什么样的webService接口,如有错误,欢迎指正: 1.以前玩微信公众帐号开发的时候,调用过百度翻译的接口,就是这种形式的接口: /** * 翻 ...
几种常用的加密方式简单介绍
1 Base64加密方式(可逆) Base64中的可打印字符包括字母A-Z/a-z/数组0-9/ 加号'+'斜杠'/' 这样共有62个字符 Base64 ios7之后加入系统库 android 中 ...
【笔记】图片两种常用的存储方式以及如何转换通道：B C H W 、 B H W C
图片常用的结构: eg1: [batch_size , channels,hight, width] eg2: [batch_size , hight, width, channels] 该结构的 ...
什么是xml解析？xml解析的有几种常用的解析方式？
xml解析概述 XML解析主要为两种:DOM和SAX解析 DOM:文档对象模型,这种方式是W3C推荐的处理XML的一种方式 SAX解析不是官方标准,属于开源社区XML-DEV,几乎所有的XML解析器都 ...
关于几种常用的通讯方式(1)：RS485、RS232、RS422
今天在项目中用到了MAX3485芯片,因此开一帖,来做一个小记录. 1 综述我们都知道,在一半情况下我们会使用串口进行通讯,但是这种串口只适合连接2个设备之间,因此存在很多不方便之处(比如我们进行一 ...
依赖注入的两种常用的注入方式
在Spring框架中,主要有两种依赖注入方式:基于构造函数.基于setter方法 1.基于构造函数基于构造函数的DI(依赖注入)是通过调用具有多个参数的的构造函数的额容器来完成的,每个参数表示依赖关 ...
php 几种常用的输出方式，输出字符串以及变量
1.echo echo是php中常用的输出语句关键字,它是语言结构,不是函数,它没有返回值,可以一次输出一个或者多个值,echo 比 print 的输出速度要快一些. 使用echo输出字符串时,需要注 ...

jQuery zTree几种常用的使用方式