可管理网页-动态目录、动态表头表的实现

是冉冉啊

已于 2024-01-11 09:54:21 修改

阅读量504

点赞数 12

文章标签： java html5 javascript

于 2024-01-10 15:30:14 首次发布

本文链接：https://blog.csdn.net/weixin_54317331/article/details/135502830

版权

本文介绍了如何实现一个可管理的网页，包括动态目录和动态表头。在数据库设计中，将表格数据分为thead和tbody两部分，每个单元格具有唯一ID。新增行时，数据按组排序确定TD位置。每个目录对应页面数据，点击跳转并传递参数。后端和前端代码实现中，运用了Thymeleaf进行判断和单元格合并。

摘要由CSDN通过智能技术生成

一、可操作网页管理-实现界面

二、代码实现

一、可操作网页管理-实现界面

分析：

给表格增加数据的时候，一般都是一行一行增加，所以我这里在设计数据库的时候，把表格所需要的数据拆未两个表，一个thead表、一个tbody表
要求对每一个数据都可以进行操作，所以在进行数据库设计的时候，每一行（tr）的每一列（td）都有一个唯一的id
为了表格内容对应表头，在新增行的时候，每一行数据为一组，再将其进行从左到右的排序，确定每一行td的位置
每一个目录对应一个页面的数据，点击跳转，传递一个参数

二、代码实现

后端代码的实现

public ModelAndView logon(){
    ModelAndView mv = new ModelAndView();
    List<Mulu> muluList = webpageImpServiceImp.searchMuluAll();//查询mulu表所有
    
    List<HengxiangBT> hengxiangNRList = webpageImpServiceImp.searchBiaoTouH(muluList.get(0).getId());//根据目录id查询表头内容,默认第一个
    List<BiaogeNR> b