我就不BB了直接上代碼：
首先定義一個(gè)樹(shù)形模型：
具體實(shí)現(xiàn)
????單表：
????多表：
最后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>匯孚金融業(yè)務(wù)管理平臺(tái)</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 >
? ? <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">層級(jí)樹(shù)</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;">
? ? ? ? ? ? <!--層級(jí)列表-->
? ? ? ? ? ? <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">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 層級(jí)列表
? ? ? ? ? ? ? ? ? ? ? ? ? ? </span> <a href="/home-web/application/applicationadd" target="myiframe"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="-btn -size-m -btn-blue -m-l30 add -t-u" style=" width:80px;">添加子系統(tǒng)</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>應(yīng)用編碼</td>
? ? ? ? ? ? ? ? ? ? ? ? <td>應(yīng)用名稱(chēng)</td>
? ? ? ? ? ? ? ? ? ? ? ? <td>說(shuō)明</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>編號(hào)</td>
? ? ? ? ? ? ? ? ? ? ? ? <td>名稱(chēng)</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 + ')');
? ? ? ? ? ? ? ? //先銷(xiāo)毀樹(shù)? 再創(chuàng)建樹(shù)
? ? ? ? ? ? ? ? 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;? ? //應(yīng)用id
? ? var mup = 0;? ? //上級(jí)id
? ? function zTreeOnClick(event, treeId, treeNode) {
? ? ? ? var level = treeNode.level;
? ? ? ? var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
? ? ? ? //如果為根節(jié)點(diǎn)
? ? ? ? if (level == 0) {
? ? ? ? ? ? //如果當(dāng)前點(diǎn)擊節(jié)點(diǎn)沒(méi)有展開(kāi)
? ? ? ? ? ? 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;
? ? ? ? }
? ? }
? ? //根節(jié)點(diǎn)展開(kāi)
? ? function expandNode(event, treeId, treeNode) {
? ? ? ? var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
? ? ? ? var level = treeNode.level;
? ? ? ? //當(dāng)根節(jié)點(diǎn)展開(kāi)時(shí),右邊顯示為application
? ? ? ? if (level == 0) {
? ? ? ? ? ? id = treeNode.id - 10000;? //變更id值
? ? ? ? ? ? loadmodule(id);
? ? ? ? ? ? treeObj.expandNode(treeNode, true, true, true);
? ? ? ? }
? ? }
? ? //關(guān)閉節(jié)點(diǎn)時(shí)回顯層級(jí)列表
? ? function zTreeOnCollapse(event, treeId, treeNode) {
? ? ? ? var level = treeNode.level;
? ? ? ? if (level == 0) {
? ? ? ? ? ? id = treeNode.id - 10000;
? ? ? ? ? ? $("#modulediv").hide();
? ? ? ? ? ? $("#appdiv").show();
? ? ? ? }
? ? }
? ? //關(guān)閉所有節(jié)點(diǎn)
? ? function zTreeBeforeExpand(treeId, treeNode) {
? ? ? ? var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
? ? ? ? if (treeNode.level == 0) {
? ? ? ? ? ? treeObj.expandAll(false);
? ? ? ? }
? ? }
? ? //加載模塊
? ? function loadmodule(appid) {
? ? ? ? //隱藏層級(jí)列表
? ? ? ? $("#appdiv").hide();
? ? ? ? //顯示相應(yīng)的模塊信息
? ? ? ? $.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("請(qǐng)先選擇一個(gè)模塊或系統(tǒng)")
? ? ? ? } 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: '未存在子系統(tǒng)窟坐，請(qǐng)先添加子系統(tǒng)！'
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? }
? ? //刪除模塊
? ? 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>
