Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
SpringBoot与Thymeleaf：高效构建动态表格与操作按钮_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

SpringBoot与Thymeleaf：高效构建动态表格与操作按钮

程序猿 • • 用户投稿

springboot与thymeleaf：高效构建动态表格与操作按钮

本文详细介绍了如何在Spring Boot应用中结合Thymeleaf模板引擎，高效且正确地在HTML表格中展示列表数据，并为每条数据集成独立的操作按钮（如删除）。通过封装数据模型、在控制器中准备数据，并在Thymeleaf模板中使用th:each进行单次迭代，确保每行数据及其对应的操作按钮逻辑清晰、避免重复，从而构建出结构化、功能完善的动态表格。

引言：Thymeleaf表格数据展示与操作

在Web应用开发中，经常需要将后端查询到的列表数据展示在前端页面，并为每条数据提供诸如编辑、删除等操作。Thymeleaf作为Spring Boot推荐的模板引擎，提供了强大的数据绑定和迭代功能。然而，在实现表格数据的循环展示并为每行添加操作按钮时，如果不熟悉其迭代机制，可能会遇到按钮重复、数据错位等问题。本教程将指导您如何以专业且高效的方式解决这一常见需求。

数据模型设计与控制器准备

要有效地在Thymeleaf中展示列表数据并进行操作，首先需要确保后端提供的数据结构是合理的。最佳实践是将相关联的数据封装在一个Java对象（POJO）中，而不是传递多个独立的列表。

1. 定义数据模型（POJO）

假设我们需要展示用户ID、邮箱以及提供删除操作，我们可以定义一个User类来封装这些信息：

// src/main/java/com/example/demo/model/User.javapackage com.example.demo.model;public class User {    private Long id;    private String email;    // 可以根据需要添加其他字段，如姓名、描述等    public User(Long id, String email) {        this.id = id;        this.email = email;    }    // Getters and Setters    public Long getId() {        return id;    }    public void setId(Long id) {        this.id = id;    }    public String getEmail() {        return email;    }    public void setEmail(String email) {        this.email = email;    }}

2. 在Spring Controller中准备数据

在Spring Boot的控制器中，我们将创建一个List集合，并将其添加到Model对象中，以便Thymeleaf模板能够访问到这些数据。

// src/main/java/com/example/demo/controller/UserController.javapackage com.example.demo.controller;import com.example.demo.model.User;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import java.util.ArrayList;import java.util.List;@Controller@RequestMapping("/users")public class UserController {    // 模拟数据存储    private List userList = new ArrayList();    public UserController() {        // 初始化一些模拟数据        userList.add(new User(1L, "alice@example.com"));        userList.add(new User(2L, "bob@example.com"));        userList.add(new User(3L, "charlie@example.com"));    }    @GetMapping("/list")    public String listUsers(Model model) {        model.addAttribute("specialUsers", userList); // 将用户列表添加到模型        return "user_list"; // 返回Thymeleaf模板的名称    }    @PostMapping("/delete")    public String deleteUser(@RequestParam("userId") Long userId, Model model) {        userList.removeIf(user -> user.getId().equals(userId));        // 删除后重定向回列表页面        return "redirect:/users/list";    }}

在上述控制器中，listUsers方法负责将模拟的用户列表specialUsers添加到模型中，并返回名为user_list的Thymeleaf模板。deleteUser方法则模拟了删除操作，接收一个userId参数并从列表中移除对应用户，然后重定向回列表页。

Thymeleaf模板实现：正确迭代与表单集成

现在，我们将在Thymeleaf模板中构建HTML表格，实现对specialUsers列表的正确迭代，并为每行用户数据添加一个删除按钮。

1. HTML表格结构与th:each的使用

在user_list.html模板中，我们将使用th:each属性来迭代specialUsers列表。关键在于将th:each放置在代表表格行的元素（

）或其外部的th:block上，以确保每次迭代生成一个完整的行。

        用户列表            table {            width: 100%;            border-collapse: collapse;        }        th, td {            border: 1px solid #ddd;            padding: 8px;            text-align: left;        }        th {            background-color: #f2f2f2;        }        button {            padding: 5px 10px;            cursor: pointer;        }        
用户管理
                <!-- 使用th:block或直接在上进行迭代，确保每行对应一个用户 -->            
                    
                ID                邮箱                操作            
                
                
                                                                                                                                                                                                                                                            
                        
                暂无用户数据

2. 代码解释与注意事项

th:block th:each=”user : ${specialUsers}”: 这是实现正确迭代的关键。th:block是一个Thymeleaf特有的元素，它在渲染时不会生成任何实际的HTML标签，但可以作为逻辑分组的容器。在这里，它确保了内部的

标签会为specialUsers列表中的每个User对象生成一次。您也可以直接将th:each放在

标签上。th:text=”${user.id}” 和 th:text=”${user.email}”: 在每次迭代中，user变量代表当前迭代到的User对象。我们可以通过user.id和user.email访问其属性，并使用th:text将其内容渲染到

标签中。表单与按钮集成: 对于每个用户，我们都创建了一个独立的表单。th:action=”@{/users/delete}”: 指定表单提交的URL，@{…}是Thymeleaf的URL表达式语法。method=”post”: 指定表单提交方式为POST。: 这是一个隐藏的输入字段，用于在提交表单时将当前用户的ID传递给后端。name=”userId”必须与控制器中@RequestParam(“userId”)的名称匹配。: 提交按钮，点击后会触发表单提交。

通过这种方式，每个User对象都会生成一个独立的表格行，该行包含用户ID、邮箱以及一个专门用于删除该用户的表单和按钮。这样就避免了原始问题中按钮重复出现的问题。

核心原理与最佳实践

数据封装: 将相关数据封装到单一POJO中是最佳实践。这使得数据模型更清晰，也简化了Thymeleaf模板中的数据访问。避免在模板中同时迭代多个不相关的列表。th:each的正确位置: 对于表格行级别的迭代，th:each应放置在

标签上，或者像示例中那样，放置在包裹

的th:block上。这样可以确保每次迭代都生成一个完整的表格行，包含该行所需的所有数据和操作。避免嵌套不当的th:each: 如果您在外部th:each（例如在

上）的内部又嵌套了一个th:each（例如在

上），那么内部的循环将为外部的每一次迭代都完整地执行一遍，这通常会导致数据重复或布局混乱，就像原始问题中出现的多个删除按钮一样。只有当确实需要在单元格内部展示一个子列表时，才应考虑嵌套th:each。使用隐藏字段传递ID: 在操作按钮（如删除、编辑）的场景中，通常需要将当前操作对象（例如用户）的唯一标识符（ID）传递给后端。使用是一个安全且标准的方法。

总结

本教程详细阐述了如何在Spring Boot和Thymeleaf环境中，高效且正确地构建包含列表数据和操作按钮的动态表格。通过遵循数据封装的原则，在控制器中准备结构化的数据，并在Thymeleaf模板中合理利用th:each进行迭代，可以轻松实现功能完善、用户体验良好的Web界面。理解th:each的工作原理及其在不同HTML元素上的作用，是掌握Thymeleaf模板开发的关键。

以上就是SpringBoot与Thymeleaf：高效构建动态表格与操作按钮的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/100212.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
以明目的食物有哪些（食补明目）
上一篇 2025年11月20日 21:31:01
swoole为什么比fpm快
下一篇 2025年11月20日 21:35:05

相关推荐

  • Linux sudoers文件配置方法 用户投稿

    Linux sudoers文件配置方法

    使用visudo编辑sudoers文件可安全配置用户权限，避免语法错误。通过用户、主机、命令别名简化管理，合理分配无需密码或特定命令权限，禁止赋予shell类命令无限制权限，并将规则写入/etc/sudoers.d/目录便于维护，配置后需测试并备份以防出错。 sudoers 文件用于配置 Linux…

    程序猿的头像 程序猿
    2026年9月23日
    100

  • mysql添加索引命令 mysql创建普通唯一复合索引教程

    mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程mysql添加索引命令 mysql创建普通唯一复合索引教程

    在mysql中给表加索引的核心目的是提升查询效率。解决方案是通过create index或alter table语句创建不同类型的索引：1. 普通索引用于加快非唯一列的查询；2. 唯一索引确保列值唯一性并提升性能；3. 复合索引支持多列组合查询，遵循最左前缀原则；4. 复合唯一索引结合复合和唯一特性…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    000
  • VSCode快速配置React：JSX支持、中文文档、组件调试 用户投稿

    VSCode快速配置React：JSX支持、中文文档、组件调试

    首先确保安装es7 react/redux/graphql/react-native snippets扩展并配置jsconfig.json文件以启用jsx语法高亮；通过安装中文语言包汉化界面，并结合浏览器书签、翻译工具及笔记软件高效查阅react中文文档；调试react组件时需安装debugger …

    程序猿的头像 程序猿
    2026年9月23日
    100

  • PaintToolSAI的AI功能如何裁剪图片？教你精准实现裁剪方法

    PaintToolSAI的AI功能如何裁剪图片？教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片？教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片？教你精准实现裁剪方法PaintToolSAI的AI功能如何裁剪图片？教你精准实现裁剪方法

    PaintToolSAI没有AI裁剪功能，其裁剪依赖手动操作。用户需使用选区工具框选区域，再通过“画布→裁剪”完成，过程基础但精确，适合专注绘画而非复杂图像处理的场景。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ PaintToolSAI…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    100
  • X 旗下 Grok 推出即时语音搜索功能 向 Google 发起挑战？ 用户投稿

    X 旗下 Grok 推出即时语音搜索功能 向 Google 发起挑战？

    近日，X 平台的人工智能助手 Grok 正式上线“即时语音搜索”功能，用户现在可通过语音直接提问，触发实时网络检索，并迅速获得整合后的精准答复。这项新能力意在优化信息查询流程，推动人机互动向更自然、高效的形态发展。 根据官方说明与实际用户体验，Grok 的语音搜索实现了“说话即搜、即时回应”的流畅体…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • Java JUnit assertThrows 与异常消息比对：避免常见陷阱 用户投稿

    Java JUnit assertThrows 与异常消息比对：避免常见陷阱

    本教程深入探讨在 Java JUnit 中使用 assertThrows 进行异常测试时常见的 assertEquals 误用问题。它详细解释了为何不能直接将期望的字符串消息与捕获到的异常对象进行比对，并提供了正确的解决方案：通过 e.getMessage() 获取异常消息进行精确断言，确保测试的准…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • PHP：根据条件动态禁用表格中的按钮 用户投稿

    PHP：根据条件动态禁用表格中的按钮

    本文旨在解决在PHP中，根据表格行中两列的值是否相等，动态禁用对应按钮的问题。通过修改循环遍历数据并生成HTML表格的代码，在生成按钮时增加条件判断，实现当mi_name列和item_name列的值相等时，禁用该行的按钮。文章提供两种实现方式，并附带代码示例，帮助开发者快速实现此功能。 在PHP中动…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • safari浏览器如何导入Netscape格式的书签文件_safari浏览器导入Netscape书签方法 用户投稿

    safari浏览器如何导入Netscape格式的书签文件_safari浏览器导入Netscape书签方法

    Safari无法直接读取Netscape格式书签时，可通过HTML文件转换、第三方工具修复或借助Chrome/Firefox中转导入。首先确认书签文件含标准结构，尝试直接导入Safari；若失败，使用Linkman Lite等工具修复格式后导入；或通过Chrome先行导入再导出标准HTML文件，最后…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • VSCode如何通过AI优化内存使用 VSCode智能内存分析调试插件 用户投稿

    VSCode如何通过AI优化内存使用 VSCode智能内存分析调试插件

    ai并不能直接优化vscode的内存占用，而是通过赋能智能化的内存分析调试插件，间接提升vscode的运行效率和开发体验；2. 这类插件通过采集堆快照、cpu性能数据、gc日志和扩展资源消耗等运行时信息，结合ai的模式识别与异常检测能力，精准识别内存泄漏、未清理的事件监听器、循环引用等问题；3. a…

    程序猿的头像 程序猿
    2026年9月23日
    200
  • PHP容器与依赖注入怎么理解_PHP中DI容器概念与Pimple等库应用 用户投稿

    PHP容器与依赖注入怎么理解_PHP中DI容器概念与Pimple等库应用

    依赖注入通过外部传入依赖解耦代码，容器如Pimple集中管理对象创建与依赖解析，提升可测试性与维护性，适用于中小型项目。 PHP中的容器和依赖注入（Dependency Injection，简称DI）是现代开发中解耦代码、提升可测试性和可维护性的核心技术。理解它们的关键在于掌握“控制反转”（Inve…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • VS Code算法实战：竞赛编程与调试环境搭建 用户投稿

    VS Code算法实战：竞赛编程与调试环境搭建

    首先安装编程语言环境及VS Code扩展，如C/C++、Code Runner和LeetCode；接着配置Code Runner支持编译运行与输入重定向；最后通过代码片段提升编码速度，形成高效竞赛开发环境。 在竞赛编程中，高效的开发环境能大幅提升编码速度与调试效率。VS Code凭借轻量、可扩展和强…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • 字节入局，AR眼镜掀起新“风口”？ 用户投稿

    字节入局，AR眼镜掀起新“风口”？

    近日，关于老凤祥与字节跳动合作推出AI眼镜的消息在网络上引发热议。据相关媒体报道，老凤祥计划联合字节跳动旗下的火山引擎共同开发多款AI眼镜，并由豆包大模型提供技术支持，预计将在今年7月正式发布。 对此，6月12日，火山引擎方面进行了澄清。其负责人表示，并未有与老凤祥合作研发AI智能眼镜的计划。而豆包…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • AdobePhotoshop的AI混合工具怎么用？掌握智能图像编辑的教程 用户投稿

    AdobePhotoshop的AI混合工具怎么用？掌握智能图像编辑的教程

    Photoshop的AI混合工具以生成式填充和神经网络滤镜为代表，通过语义理解实现智能图像融合。生成式填充可依据文本提示添加、移除或扩展内容，自动匹配光影与纹理；神经网络滤镜如和谐化则优化颜色与光照匹配。与传统基于像素计算的混合模式不同，AI工具理解图像内容，实现“生成并融合”。使用时需精准输入英文…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • PHP多维数组重构：按指定键值分组数据 用户投稿

    PHP多维数组重构：按指定键值分组数据

    本文将详细介绍如何在PHP中将扁平化的关联数组列表重构为多维数组，核心思路是根据数组中某个特定键（例如 object_type）的值进行分组，将具有相同键值的所有子数组归集到同一个父级键下，从而实现数据的层次化组织，提高数据的可读性和管理效率。 引言：数据重构的需求 在PHP开发中，我们经常会遇到需…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • 解决 Conda 环境中 Java 版本冲突的策略 用户投稿

    解决 Conda 环境中 Java 版本冲突的策略

    本文旨在解决 Conda 环境中 Java 版本激活不正确的问题。当用户尝试在 Conda 环境中指定特定 Java 版本（如 OpenJDK 8）时，系统可能仍激活旧的或错误的 Java 版本。教程将详细分析问题根源，并提供一种通过精确指定 Java 包名来确保 Conda 环境正确管理 Java…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • Windows安装过程中蓝屏INACCESSIBLE_BOOT_DEVICE怎么办？ 用户投稿

    Windows安装过程中蓝屏INACCESSIBLE_BOOT_DEVICE怎么办？

    1、蓝屏“INACCESSIBLE_BOOT_DEVICE”通常因SATA模式不匹配或驱动缺失导致；2、进入BIOS将SATA模式从RAID改为AHCI可解决兼容性问题；3、安装时加载主板存储控制器驱动以识别NVMe或RAID磁盘；4、使用diskpart命令清理磁盘并转换为GPT（UEFI）或MB…

    程序猿的头像 程序猿
    2026年9月23日
    000

  • Linux安装Redis数据库，无需公网IP实现远程连接

    Linux安装Redis数据库，无需公网IP实现远程连接Linux安装Redis数据库，无需公网IP实现远程连接Linux安装Redis数据库，无需公网IP实现远程连接Linux安装Redis数据库，无需公网IP实现远程连接

    redis作为一种高效的key-value数据库，因其将数据存储在内存中而具备极高的读写速度，广泛应用于多种场景中。以下将详细介绍如何在centos 8的linux虚拟机上搭建redis数据库，并利用cpolar实现内网穿透以便通过公网访问。 在Linux（CentOS 8）上安装Redis数据库 …

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    100
  • 谷歌为 Gemini CLI 带来扩展功能 用户投稿

    谷歌为 Gemini CLI 带来扩展功能

    谷歌旗下的 AI 编程助手 Gemini CLI 最近推出了名为“扩展”的全新功能。官方表示，这一更新让用户能够“接入常用工具，并定制属于自己的 AI 命令行体验”。现在，任何开发者都可以发布扩展程序，无需经过谷歌的审核批准即可上线使用。 目前扩展库中已提供超过 50 款扩展，涵盖多种实用场景。例如…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • 递归方法中静态变量状态管理与重置策略 用户投稿

    递归方法中静态变量状态管理与重置策略

    本教程探讨了在递归方法中使用静态（全局）变量时，如何正确管理和重置其状态，以避免多次调用时出现累积错误。核心问题在于静态变量在方法调用之间保留其值，导致后续调用基于旧状态进行计算。解决方案是在递归的基准情况（base case）中，在完成当前调用的计算后，立即将静态变量重置为初始值，从而确保每次独立…

    程序猿的头像 程序猿
    2026年9月23日
    200
  • 绘蛙AI修图怎样优化旅游照片？旅行社合作方案 用户投稿

    绘蛙AI修图怎样优化旅游照片？旅行社合作方案

    绘蛙ai修图的核心优势在于智能识别与校正，能自动调整白平衡、曝光和色彩饱和度，解决光线不佳或色彩偏差问题；2. 提供一键美化与风格化处理，内置“电影感”“清新自然”等风格，综合调整光影、对比度与锐度，提升照片视觉质感；3. 具备细节增强与瑕疵修复能力，可智能去除背景杂物、降噪、锐化，并自然修复人像瑕…

    程序猿的头像 程序猿
    2026年9月23日
    000

发表回复

登录后才能评论
关注微信