th:each 遍历集合
基本语法:
<div th:each="变量名 : 集合">
<p th:text="${变量名}"></p>
</div>
示例:遍历对象集合
- 后台代码
@Controller
public class TestController {
@RequestMapping("/th")
public String index(Model model) {
List<Student> stuList = new ArrayList<Student>();
stuList.add(new Student(2019001, "小明"));
stuList.add(new Student(2019002, "小丽"));
stuList.add(new Student(2019003, "小王"));
model.addAttribute("stuList", stuList);
return "th/index";
}
}
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr th:each="stu:${stuList}">
<td th:text="${stu.id}">000</td>
<td th:text="${stu.name}">nobody</td>
</tr>
</table>
</body>
</html>
Student.java
package com.example.demo.bean;
public class Student {
private Integer id; //学号
private String name; //姓名
public Student() {
}
public Student(Integer id, String name) {
this.id = id;
this.name = name;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
- 运行结果:
迭代状态变量的使用
在集合的迭代过程还可以获取状态变量,只需在变量后面指定状态变量 名即可,通过状态变量的属性可获取集合的下标/序号、总数、是否为单 数/偶数行、是否为第一个/最后一个等信息。
<div th:each = "变量名,状态变量名 : 集合" >
<p th:text = "${状态变量.属性}" ></p>
</div>
注:如果缺省状态变量名,则迭代器会 默认以变量名开头的状态变量 xxxStat
状态变量的属性
index:当前迭代对象的序号,从0开始,这是索引属性
count:当前迭代对象的序号,从1开始,这个是统计属性
size:迭代变量元素的总量,这是被迭代对象的大小属性
even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
first:布尔值,当前循环是否是第一个
last:布尔值,当前循环是否是最后一个
current:当前迭代变量
- 示例:带状态变量的遍历(加了一点样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<th>序号(从0开始)</th>
<th>序号(从1开始)</th>
<th>学号</th>
<th>姓名</th>
</tr>
<tr th:each=" stu, stat : ${stuList}" th:class="${ stat.odd } ? 'odd' : 'even' ">
<td th:text=" ${ stat.index } ">0</td>
<td th:text=" ${ stat.count } +'/' + ${ stat.size }">1</td>
<td th:text="${stu.id}">000</td>
<td th:text="${stu.name}">nobody</td>
</tr>
</table>
<style> table {
border-collapse: collapse; width: 500px; } th, td {
border: 1px solid blue; text-align: center; } .odd {
background-color: lightcyan; /*奇数样式*/ } .even {
background-color: lightyellow; /*偶数样式*/ } </style>
</body>
</html>
- 运行结果: