zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标（依靠css） 。
页面原型图：
功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面
前端代码实现：
引入css文档：
<link type="text/css" href="<c:url value=" /js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" /> <link type="text/css" href="<c:url value=" /js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" /> <link type="text/css" href="<c:url value=" /css/global/ztree_custom.css"/>" />
引入js文件：
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script> <script src="<c:url value="/js/system/organ.js"/>"></script>
jsp 部分：HTML部分很简单，就是相当于一个盛放树的div
<ulstyle=" overflow :auto;"></ul>
js 部分：
设置树节点
var setting = { check : { enable : false }, view : { selectedMulti : false, // addHoverDom: addHoverDom, // removeHoverDom: removeHoverDom, }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId" } }, edit : { enable : true, removeTitle : "删除节点", showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false, showRenameBtn : false }, callback : { // onRightClick : onRightClick, // 单击事件 onClick : zTreeOnClick, onNodeCreated : zTreeOnNodeCreated, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove } };
初始化，判断是否展开节点：
var zTreeObj; function initTree() { $.get(basePath + "/system/organ/getOrganTreeList", function(data) { zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree); zTreeObj.expandAll(false); }); } // 给生成的节点添加class属性 // 控制节点是否显示删除图标 function setRemoveBtn(treeId, treeNode) { return treeNode.pId != null; } // 给生成的节点添加class属性 function zTreeOnNodeCreated(event, treeId, treeNode) { var str = treeNode.tId + "_span"; $("#" + str).addClass(treeNode.type); }
单击事件，像后台发起请求，请求右侧的信息
// 单击事件，向后台发起请求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } $("#moreinform").show(); $("#baseinform").hide(); $(".po_phone_num_r").css("display", "none"); $(" .po_email_r").css("display", "none"); if (treeNode.type == "organ") { $("#organ").html("部门名称"); $("#Partman").show(); $("#Email").hide(); $("#sorgan").html("上级部门"); $("#partaddress").html("部门地址"); $("#partman").html("部门负责人"); $("#parttel").html("手机"); if (treeNode.id == "1") { $("#po").hide(); } else { $("#po").show(); } $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "get", success : function(data) { var organ = data.returnData.organ; $("#organId").val(organ.organId); $("#sex").hide(); $("#name").val(organ.organName); $("#diz").val(organ.address); $("#tel").val(organ.phone); $("#manage").val(organ.manager); $("#parentOrgan").val(organ.parentId); } }); } else { $("#po").show(); $("#organ").html("姓名"); $("#sex").show(); $("#Email").show(); $("#Partman").hide(); $("#sorgan").html("所属部门"); $("#partaddress").html("职位"); $("#parttel").html("手机"); $.ajax({ url : basePath + "/system/organ/getStaff/" + treeNode.id, type : "get", success : function(data) { var staff = data.returnData.staff; $("#organId").val(staff.id); $("#name").val(staff.name); $("#diz").val(staff.position); $("#tel").val(staff.tel); $("#profession").val(staff.sex) $("#Email02").val(staff.email); $("#parentOrgan").val(staff.organId); } }); } }
删除事件：
// 删除节点事件 function zTreeOnRemove(event, treeId, treeNode) { if (treeNode.type == "organ") { $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框 if (customGlobal.ajaxCallback(data)) { location.reload(); } } }); } else { $.ajax({ url : basePath + "/system/organ/deleteStaff/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框 if (customGlobal.ajaxCallback(data)) { initTree(); } } }); } }
总结