歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
Thymeleaf常用語法:數據迭代

Thymeleaf數據迭代使用th:each屬性,可以迭代數組、List、Set和Map等,數組、List、Set的迭代方法類似,迭代Map則會得到一個java.util.Map.Entry對象。
在迭代過程中,還可以獲取迭代狀態的變量,如迭代索引、數據集合大小等等。

開發環境:IntelliJ IDEA 2019.2.2
Spring Boot版本:2.1.8

新建一個名稱為demo的Spring Boot項目。

1、pom.xml
加入Thymeleaf依賴

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2、src/main/java/com/example/demo/user.java

package com.example.demo;

public class User {
    Integer id;
    String name;

    public User(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;
    }
}

3、src/main/java/com/example/demo/TestController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
public class TestController {
    @RequestMapping("/")
    public String test(Model model){
        List<User> users = new ArrayList<User>();
        users.add(new User(1,"張三"));
        users.add(new User(2,"李四"));
        users.add(new User(3,"王五"));
        model.addAttribute("users", users);

        Map<String, User> userMap = new HashMap<String,User>();
        userMap.put("a", new User(4, "趙六"));
        userMap.put("b", new User(5, "錢七"));
        model.addAttribute("userMap", userMap);
        return "test";
    }
}

4、src/main/resources/templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table { border-collapse:collapse;}
        td { border: 1px solid #C1DAD7;}
    </style>
</head>
<body>

<div>迭代List</div>
<table>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
</table>

<div>迭代Map</div>
<table>
    <tr th:each="map : ${userMap}">
        <td th:text="${map.key} + |--| + ${map.value.id} + |--| + ${map.value.name}"></td>
    </tr>
</table>

<div>迭代狀態對象</div>
<table>
    <tr th:each="data,iterState : ${#numbers.sequence(0,2)}"
        th:style="|background-color:| + ${iterState.odd ? 'while' : 'gray'}">
        <td th:text="|從0開頭的索引:| + ${iterState.index}"></td>
        <td th:text="|從1開頭的索引:| + ${iterState.count}"></td>
        <td th:text="|數據集合大小:| + ${iterState.size}"></td>
        <td th:text="|當前節點:| + ${iterState.current}"></td>
        <td th:text="|是否第一次迭代:| + ${iterState.first}"></td>
        <td th:text="|是否最后一次迭代:| + ${iterState.last}"></td>
        <td th:text="|是否偶數迭代:| + ${iterState.even}"></td>
        <td th:text="|是否奇數迭代:| + ${iterState.odd}"></td>
    </tr>
</table>
上面的iterState是顯式聲明的迭代狀態對象,也可以按默認規劃“節點變量名+Stat”獲取
<table>
    <tr th:each="data : ${#numbers.sequence(0,2)}"
        th:style="|background-color:| + ${dataStat.odd ? 'while' : 'gray'}">
        <td th:text="${data}"></td>
    </tr>
</table>
<table>
    <tr th:each="user : ${users}"
        th:style="|background-color:| + ${userStat.odd ? 'while' : 'gray'}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
</table>

</body>
</html>

瀏覽器訪問:http://localhost:8080,截圖如下:

 

 右鍵查看網頁源代碼,生成的HTML源碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table { border-collapse:collapse;}
        td { border: 1px solid #C1DAD7;}
    </style>
</head>
<body>

<div>迭代List</div>
<table>
    <tr>
        <td>1</td>
        <td>張三</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
    </tr>
</table>

<div>迭代Map</div>
<table>
    <tr>
        <td>a--4--趙六</td>
    </tr>
    <tr>
        <td>b--5--錢七</td>
    </tr>
</table>

<div>迭代狀態對象</div>
<table>
    <tr style="background-color:while">
        <td>從0開頭的索引:0</td>
        <td>從1開頭的索引:1</td>
        <td>數據集合大小:3</td>
        <td>當前節點:0</td>
        <td>是否第一次迭代:true</td>
        <td>是否最后一次迭代:false</td>
        <td>是否偶數迭代:false</td>
        <td>是否奇數迭代:true</td>
    </tr>
    <tr style="background-color:gray">
        <td>從0開頭的索引:1</td>
        <td>從1開頭的索引:2</td>
        <td>數據集合大小:3</td>
        <td>當前節點:1</td>
        <td>是否第一次迭代:false</td>
        <td>是否最后一次迭代:false</td>
        <td>是否偶數迭代:true</td>
        <td>是否奇數迭代:false</td>
    </tr>
    <tr style="background-color:while">
        <td>從0開頭的索引:2</td>
        <td>從1開頭的索引:3</td>
        <td>數據集合大小:3</td>
        <td>當前節點:2</td>
        <td>是否第一次迭代:false</td>
        <td>是否最后一次迭代:true</td>
        <td>是否偶數迭代:false</td>
        <td>是否奇數迭代:true</td>
    </tr>
</table>
上面的iterState是顯式聲明的迭代狀態對象,也可以按默認規劃“節點變量名+Stat”獲取
<table>
    <tr style="background-color:while">
        <td>0</td>
    </tr>
    <tr style="background-color:gray">
        <td>1</td>
    </tr>
    <tr style="background-color:while">
        <td>2</td>
    </tr>
</table>
<table>
    <tr style="background-color:while">
        <td>1</td>
        <td>張三</td>
    </tr>
    <tr style="background-color:gray">
        <td>2</td>
        <td>李四</td>
    </tr>
    <tr style="background-color:while">
        <td>3</td>
        <td>王五</td>
    </tr>
</table>

</body>
</html>

如需轉載,請注明文章出處和來源網址:http://www.133025.buzz/html/h57866.shtml

德甲最新射手榜 11选5走势图江苏 河北福彩网官网首页 排列三综合走势图 湖北体彩11选五玩法介绍 辽宁体彩十一选五推荐 体育彩票36选7今天 南宁股票配资贴吧 玩快3不贪心每天赚几百 双色球下载安装2020年 黑十一选五开奖走势图 快乐8的上中下怎么玩 听说佳永配资好,是真的吗? 海南飞鱼在线开奖结果 安徽十一选五下载 福州福彩快三走势图 山西快乐10分下注