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

本文介绍如何在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对象 有 额外的两个属性。

父节点的实体对象 和子节点的Menu对象集合

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

2.2 List《Menu》 转化成Menu root

我们需要用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>

没有注释 应该不用写了吧。。。很简单的

然后看运行图

嗯 。大功告成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值