Spring Boot Thymeleaf 使用th:each遍歷集合物件。
參考「Spring Boot Thymeleaf 簡單範例」搭建Spring Boot Thymeleaf專案，下面以此進行修改。
新增一個Employee類別，為集合中的元素。
Employee
package com.abc.demo.model;
public class Employee {
private long id;
private String name;
private int age;
// getters and setters
}
在導向hello.html的DemoController.hello()方法中建立集合物件List<Employee> employeeList及加入兩個元素，然後把集合物件放入model中，屬性名稱為"employeeList"。
DemoController
package com.abc.demo.controller;
import com.abc.demo.model.Employee;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.Arrays;
import java.util.List;
@Controller
public class DemoController {
@GetMapping("/hello")
public String hello(
@RequestParam(name = "name", required = false, defaultValue = "World") String name,
Model model) {
model.addAttribute("name", name);
Employee employee1 = new Employee();
employee1.setId(1);
employee1.setName("John");
employee1.setAge(29);
Employee employee2 = new Employee();
employee2.setId(2);
employee2.setName("Anne");
employee2.setAge(22);
List<Employee> employeeList = Arrays.asList(employee1, employee2);
model.addAttribute("employeeList", employeeList);
return "hello"; // forward to hello.html
}
}
在hello.html中<tr>利用th:each="employee : ${employeeList}"取得名稱為"employeeList"的model attribute，也就是上面的employeeList集合物件，然後遍歷集合內的元素放入employee變數中供子標籤<td>取用。
除了集合本身，thymeleaf還提供遍歷狀態資訊。在集合元素變數後以逗號區隔必加上任意名稱，例如下面的status即可取得目前遍歷的狀態屬性資訊，包括索引index、遍歷數count、遍歷數是否為偶數even、遍歷數是否為奇數odd、是否為第一個first、是否為最後一個last。
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello Thymeleaf</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'"/>
<h2>Employee List</h2>
<table>
<thead>
<tr>
<th>INDEX</th>
<th>COUNT</th>
<th>EVEN</th>
<th>ODD</th>
<th>FIRST</th>
<th>LAST</th>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr th:each="employee,status : ${employeeList}">
<td th:text="${status.index}">index</td>
<td th:text="${status.count}">count</td>
<td th:text="${status.even}">even</td>
<td th:text="${status.odd}">odd</td>
<td th:text="${status.first}">first</td>
<td th:text="${status.last}">last</td>
<td th:text="${employee.id}">id</td>
<td th:text="${employee.name}">name</td>
<td th:text="${employee.age}">age</td>
</tr>
</tbody>
</table>
</body>
</html>
啟動專案後在瀏覽器輸入http://localhost:8080/demo/hello經Thymeleaf解析後回應的結果如下。可以看到集合被遍歷並顯示每個元素的內容。
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<p>Hello, World!</p>
<h2>Employee List</h2>
<table>
<thead>
<tr>
<th>INDEX</th>
<th>COUNT</th>
<th>EVEN</th>
<th>ODD</th>
<th>FIRST</th>
<th>LAST</th>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>false</td>
<td>true</td>
<td>true</td>
<td>false</td>
<td>1</td>
<td>John</td>
<td>29</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>true</td>
<td>false</td>
<td>false</td>
<td>true</td>
<td>2</td>
<td>Anne</td>
<td>22</td>
</tr>
</tbody>
</table>
</body></html>
參考github。
沒有留言:
張貼留言