首先谈谈其中用到的技术，在JeeSite中用到了以下技术：
1.jQuery的zTree插件
zTree v3.5.40 API 文档：http://www.treejs.cn/v3/api.php
2.# $.getJSON( )的使用方法简介
https://www.cnblogs.com/leejersey/p/3750232.html
1.首先来看看JeeSite中用到的左树右表页面。
2.查看下此页面的controller和对应的jsp页面
点击左侧菜单栏中的用户管理链接，发起请求。在单独页面打开。
图片.png
3.这里来到对应的UserController。
图片.png
4.接下来根据UserController来到对应的jsp页面。
如下是jsp页面中所有内容：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>用户管理</title>
<meta name="decorator" content="default"/>
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
<style type="text/css">
.ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}
</style>
</head>
<body>
<sys:message content="${message}"/>
<div id="content" class="row-fluid">
<div id="left" class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle">组织机构<i class="icon-refresh pull-right" onclick="refreshTree();"></i></a>
</div>
<div id="ztree" class="ztree"></div>
</div>
<div id="openClose" class="close"> </div>
<div id="right">
<iframe id="officeContent" src="${ctx}/sys/user/list" width="100%" height="91%" frameborder="0"></iframe>
</div>
</div>
<script type="text/javascript">
var setting = {
data:{
simpleData:
{
enable:true,
idKey:"id",
pIdKey:"pId"
,rootPId:'0'
}
},
callback:{
onClick:function(event, treeId, treeNode){
var id = treeNode.id == '0' ? '' :treeNode.id;
$('#officeContent').attr("src","${ctx}/sys/user/list?office.id="+id+"&office.name="+treeNode.name);
}
}
};
function refreshTree(){
$.getJSON("${ctx}/sys/office/treeData",function(data){
$.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
});
}
refreshTree();
var leftWidth = 180; // 左侧窗口大小
var htmlObj = $("html"), mainObj = $("#main");
var frameObj = $("#left, #openClose, #right, #right iframe");
function wSize(){
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
mainObj.css("width","auto");
frameObj.height(strs[0] - 5);
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
}
</script>
<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>
5.这里对代码块进行分析：
6.在页面中对JQuery.zTree插件进行代码分析：
<script type="text/javascript">
var setting = {
data:{
simpleData:
{
enable:true,
idKey:"id",
pIdKey:"pId"
,rootPId:'0'
}
},
callback:{
onClick:function(event, treeId, treeNode){
var id = treeNode.id == '0' ? '' :treeNode.id;
$('#officeContent').attr("src","${ctx}/sys/user/list?office.id="+id+"&office.name="+treeNode.name);
}
}
};
function refreshTree(){
$.getJSON("${ctx}/sys/office/treeData",function(data){
$.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
});
}
refreshTree();
var leftWidth = 180; // 左侧窗口大小
var htmlObj = $("html"), mainObj = $("#main");
var frameObj = $("#left, #openClose, #right, #right iframe");
function wSize(){
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
mainObj.css("width","auto");
frameObj.height(strs[0] - 5);
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46);
}
</script>
<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
对应数据库中的结构
7.请求的Controller和对应返回的json内容
8.当点击对应的树节点时触发的方法
请求UserController
9.调用refreshTree()方法开始渲染zTree树。
10.对refreshTree()方法进行分析：
10.中间点击收起来页面的js代码
点击之后将页面收起来：
点进入对应的js代码：
这里因为项目中是不能整理代码行的，所以截取了视频的页面
这个是项目中的代码：
