目录树的数据库设计、java后台读取，以及前台javascript的显示

最新推荐文章于 2023-08-14 20:51:18 发布

nihao_医生

最新推荐文章于 2023-08-14 20:51:18 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaWeb 文章标签：目录树 java

本文链接：https://blog.youkuaiyun.com/qq_18799641/article/details/53768294

javaWeb 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在JavaWeb项目中设计并实现树形结构，包括数据库结构设计、Java对象模型构建及页面展示等关键步骤。通过实例说明了如何利用递归和循环方法将树形数据转换为易于展示的格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

—–整理自凋落学长的笔记

我们网站肯定经常用到目录树

树在java web项目中的应用 ，主要是用来存储目录。

即这种：

这个应该是从数据库查出来的而不是写死在页面上的

如果每一个目录下都可以有0-n个目录是无限级别的是存储在数据库中的可维护的

1.数据库结构设计

那么树形结构如何在关系数据库中存储中呢？

一对多那种存储子目录吗？

这不行，因为是无限级别的，一对多只能两级。那如何存储不确定的分支数量和不确定的分支级数。

简单的来说，表结构是这样的：

有一个根节点父级id是 0

剩下的所有节点全部具有父节点主键自增就好了，父级id是该级别的上一级

url

即绝对路径指从根节点到自己这里的所有经过的节点名称中间用符号隔开

那么到这里大家可能想怎么查找？我们可以在java后台中，查出list 然后再组合

2.java树结构

那么java怎么操作这个玩意儿？

java有List 有Map 有Set
但是没有tree

所以我们要自定义一个对象

我们这里可以叫menu对象

这四个属性确实和数据库中的四个列

一一对应了。
但是我们如果仅仅是用List

来表达一个菜单的话，没有什么用。

所以接着写

每一个Menu对象有额外的两个属性。

于是这就是一个有父节点有子节点的对象

我们需要用java代码把 parentMenu对象和 set赋值

至于 set基本上就简单了。大概就是

树的宽度遍历方法

先通过遍历List

对象找到父id是0的，根节点然后用上面的方法把他的子节点通过递归赋值

大概就是这样了。

我们就可以得到一个Menu对象

它就是整个菜单

技巧：url

为什么要存储绝对路径

你可以用符号分割大概这样：

url.split（“/”）.length = ?

通过这个长度就可以得到这是第几级目录

最后从数据库中查出来的Menu对象集合通过这一整个大保健之后

就变成了一个Menu对象

3. 页面展示树

通常我们是把每个目录包含的连接什么的做成文章开头那样目录树

通过一些js的tree.js这种函数库

这里我们为了方便用一个列表来大概显示出来这些目录

<ul></ul>

这样大家先看着。然后自己改进

我们在上一步中直接把 Menu对象转化为

JSON格式

然后在页面中使用javascript代码解析 json字符串

也是那个递归加循环的方法

然后通过append生成新的菜单列表

<%@taglib prefix="s" uri="/struts-tags" %>
<HTML>
<HEAD>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</HEAD>
<BODY id="0">
    <a href="#" onclick="show('<s:property value="json"/>')">啊啊</a>
<script type="text/javascript">
function show(jsonstr){
    alert(jsonstr);
    var m = eval("("+jsonstr+")");
    parseJson(m);
}
    function parseJson(json){
        $("#" + json.parentID).append("<ul id=" + json.ID + ">" + json.name + "</ul>");
        if(json.menuSet.length>0){
            $.each(json.menuSet,function(){
                parseJson(this);
            })
        }else{
            return;
        }
    }
</script>

</BODY>
</HTML>