SpringBoot使用thymeleaf实现一个前端表格方法详解
1. User 实体类
注：这里使用了 Lombok 技术，通过 @Data 注释自动创建 get，set 方法；通过 @NoArgsConstructor 注释自动创建无参数的构造方法；通过 @AllArgsConstructor 注释自动创建有参数构造方法
如果不想使用，可以自行创建get，set 方法以及构造方法
import jdk.nashorn.internal.objects.annotations.Constructor;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@NoArgsConstructor
@AllArgsConstructor
@Data
public class User {
private String userName;
private String password;
}2. Controller 类
创建一 user 的 list ，使用 addAttribute() 方法将其放入 medol 中，以便前端取出 medol 中的数据
注意：thymeleaf解析不能带 html 后缀，因此转发到 table下的dynamic_table.html 文件要写成 return "table/dynamic_table";
package com.wanqing.admin.controller;
import com.wanqing.admin.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.List;
@Controller
public class TableController {
@GetMapping("/dynamic_table")
public String dynamic_table(Model model){
// 表格内容的遍历
List<User> users = Arrays.asList(new User("刘婉晴", "520131"),
new User("加油","aaa"),
new User("不可以放弃","come on"));
model.addAttribute("users", users);
return "table/dynamic_table"; // thymeleaf解析不能带 html 后缀
}
}3. html 文件
创建 dynamic_table.html 文件在 templates 的 table 文件夹下
得到后端传入的数据的语法为 ${要操作的后端传入的数据}
- 使用
th:each="user:${users}"遍历得到每个 user。 - 取出每个 user 值放入表格中时 可以使用
th:text="${user.userName}"也可以使用[[${user.password}]]
注： stats 为自增 id，用于记录遍历到第几个 user，得到数量的方法为th:text="${stats.count}"，用 逗号 与 user 隔开
<!--body wrapper start-->
<div class="wrapper">
<div class="row">
<div class="col-sm-12">
<section class="panel">
<div class="panel-body">
<div class="adv-table">
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead> <!--标头-->
<tr>
<th>#</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody> <!--标体-->
<tr class="gradeX" th:each="user,stats:${users}">
<td th:text="${stats.count}">Trident</td>
<td th:text="${user.userName}">Internet</td>
<td>[[${user.password}]]</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
</div>
<!--body wrapper end-->到此这篇关于SpringBoot使用thymeleaf实现一个前端表格方法详解的文章就介绍到这了,更多相关SpringBoot thymeleaf内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
