我就不BB了直接上代码：
首先定义一个树形模型：
具体实现
单表：
多表：
最后jsp我直接全部上传吧:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>汇孚金融业务管理平台</title>
<script type="text/javascript" src="/home-web/static/zui/lib/jquery/jquery.js"></script>
<link rel="stylesheet" href="/home-web/static/zTreeStyle/zTreeStyle.css"
type="text/css">
<script type="text/javascript" src="/home-web/static/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/home-web/static/jquery/jquery.ztree.core.js"></script>
<script type="text/javascript"
src="/home-web/static/jquery/jquery.ztree.excheck.js"></script>
<link rel="stylesheet" type="text/css" href="/home-web/static/css/style.css"/>
<link href="http://images.yundai365.com/lib/layer2.0/skin/layer.css">
<script src="http://images.yundai365.com/lib/layer/layer/layer.js"></script>
</head>
<body>
<div class="-row -box -bg-fff" style="height: 100%">
<div class="-w-tp-3 -w-pc-3 -w-tv-2 -p-r20" style="height: 100%">
<div class="-bg-fff" style="height: 100%">
<div class="-row -p-20 -box" style="height:100%;overflow: auto;">
<div class="-w-12 -h-12">
<div class="-bg-fff -p-10 -h-12">
<a href="/home-web/application/applicationListNew" style="text-decoration:none;">
<div class="h1">层级树</div>
</a>
<div class="-p-10">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="-w-tp-9 -w-pc-9 -w-tv-10 -p-t20" style="height: 100%">
<div id="body" class="-row -box" style="height:100%;overflow: auto;">
<!--层级列表-->
<div class="-bg-fff" id="appdiv"
style="height: 100%;<c:if test='${appid != null}'>display: none;</c:if>">
<div class="-row -p-10">
<div class="-row">
<div class=" -w-6">
<span class="h1">
层级列表
</span> <a href="/home-web/application/applicationadd" target="myiframe"
class="-btn -size-m -btn-blue -m-l30 add -t-u" style=" width:80px;">添加子系统</a>
</div>
</div>
</div>
<table class="-table -table-simple -table-hover -m-b0 -t-c"
width="100%" id="hovertableApp" style="overflow:auto;">
<thead>
<tr>
<td>ID</td>
<td>应用编码</td>
<td>应用名称</td>
<td>说明</td>
<td>操作</td>
</tr>
</thead>
<tbody id="appdetail">
<c:forEach items="${applicationlist}" var="application">
<tr>
<td>${application.appID}</td>
<td>${application.applicationsCode}</td>
<td>${application.name}</td>
<td>${application.describes}</td>
<td>
<div class="-btn-group">
<a class="-btn -size-m -btn-blue"
href="/home-web/application/updateApplications?id=${application.appID}"
style="min-width: 60px">编辑</a>
<input type="button" class="-btn -size-m -btn-red" style="min-width:60px"
onclick="delApplication(${application.appID})" value="删除"/>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<!--模块列表-->
<div class="-bg-fff" id="modulediv"
style="height: 100%;<c:if test='${modulelist == null}'>display: none</c:if>">
<div class="-row -p-10">
<div class="-row">
<div class=" -w-6">
<span class="h1">
模块列表
</span> <a onclick="addModule()" class="-btn -size-m -btn-blue -m-l30 add -t-u"
style="width: 100px;">添加模块</a>
</div>
</div>
</div>
<table class="-table -table-simple -table-hover -m-b0 -t-c"
width="100%" id="hovertableModule" style="overflow:auto;">
<thead>
<tr>
<td>ID</td>
<td>编号</td>
<td>名称</td>
<td>入口</td>
<td>操作</td>
</tr>
</thead>
<tbody id="moddetail">
<c:forEach items="${modulelist}" var="module">
<tr>
<td>${module.moduleID}</td>
<td>${module.modulecode}</td>
<td>${module.name}</td>
<td>${module.url}</td>
<td width="160">
<div class="-btn-group">
<a class="-btn -size-m -btn-blue"
href="/home-web/module/findByid?id=${module.moduleID}"
style="min-width: 60px">编辑</a>
<input type="button" class="-btn -size-m -btn-red" style="min-width:60px"
onclick="delModule(${module.moduleID})" value="删除"/>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/home-web/static/js/style.js"></script>
<script>
$(".audit-btn").click(function () {
$(".-windows").attr("class", "-windows -bg-70-000 -box -size-xl -flash-page-zoomGo").css("display", "block");
})
$(".-windows .-x").click(function () {
$(".-windows").attr("class", "-windows -bg-70-000 -box -size-xl -flash-page-zoomOut");
setTimeout("$('.-windows').css('display','none')", 300)
})
</script>
</body>
<script type="text/javascript">
$(document).ready(function () {
var setting = {
check: {
enable: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: zTreeOnClick,
onExpand: expandNode,
beforeExpand: zTreeBeforeExpand,
onCollapse: zTreeOnCollapse
}
};
$.post("/home-web/application/getApplicationsTree", {},
function (data) {
console.log(data);
var dataStr = eval('(' + data.returnValue + ')');
//先销毁树 再创建树
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
//zTreeObj.destroy();
console.log(dataStr)
$.fn.zTree.init($("#treeDemo"), setting, dataStr);
})
})
</script>
<script type="text/javascript">
var id = 0; //应用id
var mup = 0; //上级id
function zTreeOnClick(event, treeId, treeNode) {
var level = treeNode.level;
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
//如果为根节点
if (level == 0) {
//如果当前点击节点没有展开
if (treeNode.open == false) {
treeObj.expandAll(false);
treeObj.expandNode(treeNode, true, true, true);
}
id = treeNode.id - 3650;
mup = 0;
loadmodule(id);
} else {
mup = treeNode.id;
}
}
//根节点展开
function expandNode(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var level = treeNode.level;
//当根节点展开时,右边显示为application
if (level == 0) {
id = treeNode.id - 10000; //变更id值
loadmodule(id);
treeObj.expandNode(treeNode, true, true, true);
}
}
//关闭节点时回显层级列表
function zTreeOnCollapse(event, treeId, treeNode) {
var level = treeNode.level;
if (level == 0) {
id = treeNode.id - 10000;
$("#modulediv").hide();
$("#appdiv").show();
}
}
//关闭所有节点
function zTreeBeforeExpand(treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
if (treeNode.level == 0) {
treeObj.expandAll(false);
}
}
//加载模块
function loadmodule(appid) {
//隐藏层级列表
$("#appdiv").hide();
//显示相应的模块信息
$.ajax({
type: "post",
url: "/home-web/module/findByappid",
dataType: "json",
data: {"appid": appid},
success: function (data) {
modules = data;
$("#moddetail").html(""); //删除原有的模块信息
if (modules.length >= 0) {
for (var i = 0; i < modules.length; i++) {
var sHtml = "";
sHtml += '<tr>' +
'<td>' + modules[i].moduleID + '</td>' +
'<td>' + modules[i].modulecode + '</td>' +
'<td>' + modules[i].name + '</td>' +
'<td>' + modules[i].url + '</td>' +
'<td width="160">' +
'<div class="-btn-group">' +
'<a class="-btn -size-m -btn-blue" href="/home-web/module/findByid?id=' + modules[i].moduleID + '" style="min-width: 60px">编辑</a>' +
'<input type="button" class="-btn -size-m -btn-red" style="min-width:60px" onclick="delModule(' + modules[i].moduleID + ')" value="删除" />' +
'</div>' +
'</td>' +
'</tr>';
$("#moddetail").append(sHtml);
}
}
}
});
//显示模块div
$("#modulediv").show();
}
//添加模块
function addModule() {
if (id == 0) {
layer.msg("请先选择一个模块或系统")
} else {
$.ajax({
type: "post",
url: "/home-web/application/query",
dataType: "json",
success: function (data) {
console.log(data);
var obj = $.parseJSON(data);
var result = obj.result;
console.log(result);
if (result == "yes") {
window.location.href = "/home-web/module/moduleadd?appid=" + id + "&mup=" + mup;
} else {
layer.open({
title: '提示',
content: '未存在子系统，请先添加子系统！'
});
}
}
})
}
}
//删除模块
function delModule(moduleId) {
$.ajax({
type: "post",
url: "/home-web/module/delByid",
dataType: "json",
data: {"id": moduleId},
success: function (data) {
if (data.result == "success") {
//删除成功
window.location.href = "/home-web/application/applicationListNew";
} else if (data.result == "fail") {
layer.msg(data.msg);//删除失败
} else {
layer.msg(data.msg);
}
}
});
}
function delApplication(appid) {
$.ajax({
type: "post",
url: "/home-web/application/deleteApplications",
dataType: "json",
data: {"appid": appid},
success: function (data) {
if (data.result == "success") {
window.location.reload();
} else {
layer.msg(data.result);
}
}
});
}
</script>
</html>
