前言：什么是 zTree
官方简介： zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
官网地址： http://www.treejs.cn
zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。
官网地址： http://www.treejs.cn
一、作为侧边的菜单使用
这是最简单的一种，也是最常用的一种使用方式
目录结构
结构中的css，js均为为ztree官方的。JQuery使用的2.0.3。官方说的理论上1.3+版本的JQery都可以使用的。http://www.treejs.cn/v3/faq.php#_202
前端代码
<!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; /* 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")
@ResponseBody
public 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");//默认节点展开
//点击节点后触发的事件。事件具体方式请看js
itemmap.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; /* 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; /* 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=" 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>
结果
结果
作者：Hiseico
链接：https://www.jianshu.com/p/ebc5b3509300
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
ztree实现根节点单击事件，显示节点信息
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
• 兼容 IE、FireFox、Chrome 等浏览器 • 在一个页面内可同时生成多个 Tree 实例 • 支持 JSON 数据 • 支持一次性静态生成 和 Ajax 异步加载 两种方式 • 支持多种事件响应及反馈 • 支持 Tree 的节点移动、编辑、删除 • 支持任意更换皮肤 / 个性化图标（依靠css） • 支持极其灵活的 checkbox 或 radio 选择功能 • 简单的参数配置实现 灵活多变的功能
在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细。
图片.png
需求，点击根节点的时候，alert出所点击的事件里面的具体节点信息，在这个过程里，如果点击到了父节点（嘉定监狱），则不显示任何信息
1：在setting 配置里面，给callback设置，单击事件onClick : zTreeOnClick；
图片.png
2：写一个函数zTreeOnClick
// 单击事件
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + ", " + treeNode.name);
}
3：父节点不需要点击事件，父节点为1，如果节点为1 的时候，不执行下一步
if (treeNode.id == "1") {
return;
}
图片.png
项目js部分完整代码，仅供参考
var detain = function() { AssetSavetype = null; AssetSelecttype = null; getFloorList(); initLoadMap('detainmap'); var beforeNodeID; var basePath; var url; var setting = { check : { enable : true, chkStyle : "radio", radioType : "all" }, view : { selectedMulti : true, showLine : false }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId", } }, edit : { enable : true, removeTitle : "删除节点", showRemoveBtn : setRemoveBtn, showRenameBtn : setRenameBtn }, async : { enable : true, url : "/bison/design/detain/getTree", autoParam : [ "id" ], type : "get", dataFilter : ajaxDataFilter, dataType : "json" }, callback : { // 单击事件 onClick : zTreeOnClick, onCheck : zTreeOnCheck, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove, onRename : zTreeOnRename } }; var zTreeObj; // 初始化根节点 function initTree() { $.get(basePath + "/design/detain/initNode?type=1", function(data) { // 设置父节点不显示checkbox data.returnData.node.nocheck = true; zTreeObj = $.fn.zTree.init($("#zTree"), setting, data.returnData.node); }); } // 单击事件，向后台发起请求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } alert(treeNode.tId + ", " + treeNode.name); } function setRemoveBtn(treeId, treeNode) { if(treeNode.id == 1){ return false; } return true; } function setRenameBtn(treeId, treeNode) { if(treeNode.id == 1){ return false; } return true; } function zTreeBeforeRemove(treeId, treeNode) { if (confirm("是否确认删除")) return true; return false; } function zTreeOnRemove(event, treeId, treeNode) { $.ajax({ url : basePath + "/design/detain/deleteNode", data : { id : treeNode.id, }, type : "get", success : function(data) { } }); deleteDetain(treeNode.id); } function zTreeOnRename(event, treeId, treeNode) { $.ajax({ url : basePath + "/design/detain/updateName", data : { id : treeNode.id, name : treeNode.name }, type : "POST", success : function(data) { } }); } // 异步加载数据过滤器 function ajaxDataFilter(treeId, parentNode, responseData) { var data = responseData.returnData.treeList; return data; } ; // 节点勾选事件 function zTreeOnCheck(event, treeId, treeNode) { // 显示围栏 if (beforeNodeID != treeNode.id) { electronicLayerOff = true; beforeNodeID = treeNode.id; } showDetain([ treeNode.id ]); } ; // 获取项目路径 function getContextPath() { var currentPath = window.document.location.href; var pathName = window.document.location.pathname; var pos = currentPath.indexOf(pathName); var localhostPath = currentPath.substring(0, pos); var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); return (localhostPath + projectName); } // 显示配置记录 function showDetain(DetainNum) { electronicLayer.getSource().clear(); if (electronicLayerOff) { for (var num = 0; num < DetainNum.length; num++) { var electronicParam = { service : 'WFS', version : '1.1.0', request : 'GetFeature', typeName : DBs + ':detain', outputFormat : 'application/json', cql_filter : "bid='" + DetainNum[num] + "'" }; $.ajax({ url : wfsUrl, data : $.param(electronicParam), type : 'GET', dataType : 'json', success : function(response) { var features = new ol.format.GeoJSON() .readFeatures(response); electronicLayer.getSource().addFeatures(features); } }); } electronicLayerOff = false; } else { electronicLayerOff = true; } } // 资产FID获取 var FIDObject = function(Filter, Typename) { var Fid = []; $.ajax({ url : wfsUrl, data : { service : 'WFS', version : '1.1.0', request : 'GetFeature', typename : Typename, outputFormat : 'application/json', cql_filter : Filter }, type : 'GET', dataType : 'json', async : false, success : function(response) { if (response.features.length == 1) { Fid[0] = response.features[0].id; } else if (response.features.length > 1) { for (var i = 0; i < response.features.length; i++) { Fid[i] = response.features[i].id; } } else { } } }); return Fid; }; // 删除配置记录 function deleteDetain(id) { var Filter = "bid=" + "'" + id + "'"; var Typename = DBs + ':detain'; var newFeature = new ol.Feature(); newFeature.setId(FIDObject(Filter, Typename)[0]); var tableType = 'detain'; updateNewFeature([ newFeature ], tableType, 'remove'); if (beforeNodeID == id) { electronicLayer.getSource().clear(); } } // 添加配置 $("#adddetain").on("click", function() { layer.open({ type : 2, title : '添加配置', area : [ '550px', '550px' ], // fix : false, � content : [ './adddetain.jsp', ], end : function() { initTree(); electronicLayer.getSource().clear(); } }); }); return { init : function() { basePath = getContextPath(); initTree(); } }; }();
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知