網頁

▼

2021/5/23

Spring Boot Thymeleaf 使用th:each遍歷集合物件 collection iteration

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。


沒有留言:

張貼留言