SpringBoot——Thymeleaf常见属性-使用th:each遍历数组、List、Map

1th:each遍历数组先创建一个user表package com.liuhaiyang.springboot.entity;import lombok.Data;//@Data 添加这个注解将不需要在写构造方法set、get等public class User {privateInteger id;privateString name;private String phone;private S

莫得情感的码农

15604人浏览 · 2021-10-06 22:52:55

莫得情感的码农 · 2021-10-06 22:52:55 发布

1 th:each遍历数组

先创建一个user表

package com.liuhaiyang.springboot.entity;

import lombok.Data;

//@Data 添加这个注解将不需要在写构造方法set、get等
public class User {
    private  Integer id;
    private  String name;
    private String phone;
    private String address;

   //set()和get方法（）
}

这里说一下要是想使用@Data注解，需要在pom文件添加lombok 插件

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

核心配置文件

#关闭Thymeleaf页面的缓存开关
spring.thymeleaf.cache=false
 
#thymeleaf 模版前缀，默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀，默认值,可选项
spring.thymeleaf.suffix=.html

写一个controller控制层类

@Controller
public class UserController {

 @RequestMapping("/each/array")
    public String eachArray(Model model){
        User[] users=new User[10];
        for (int i=0;i<10;i++){
            User user=new User();
            user.setId(i);
            user.setName("王五"+i);
            user.setPhone("8888888888"+i);
            user.setAddress("北京丰台"+i);
            users[i]=user;
        }
        model.addAttribute("users",users);
        return "eachArray";
    }
}

eachArray 页面展示数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历Array数组</title>
</head>
<body>
    <h1>循环遍历Array数组(使用方法和list一样)</h1>
    <div th:each="user:${users}">
        <span th:text="${userStat.index}"></span>
        <span th:text="${userStat.count}"></span>
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.phone}"></span>
        <span th:text="${user.address}"></span>
    </div>
</body>
</html>

结果截图

2 th:each遍历List集合

user类请看上面

controller类

@Controller
public class UserController {

    @RequestMapping("/each/list")
    public String eachList(Model model){
        List<User> userList=new ArrayList<User>();
        for (int i=0;i<10;i++){
            User user=new User();
            user.setId(100+i);
            user.setName("张"+i);
            user.setPhone("12345678"+i);
            user.setAddress("河南省郑州市"+i);
            userList.add(user);
        }
        model.addAttribute("userList",userList);
        model.addAttribute("data","springboot");
        return "eachList";
    }
}

前端页面

th:each="user, userStat : ${userList}" 中的 ${userList} 是后台传过来的集合

userStat 是循环体的信息，通过该变量可以获取如下信息

index: 当前迭代对象的 index （从 0 开始计算）

count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历List集合</title>
</head>
<body>
<!--    user 当前循环的对象变量名称（随意）
        userStat 当前循环对象状态的变量(可不写，默认就是对象变量名称+Stat)
        ${userList} 当前循环的集合-->
    <div th:each="user,userStat:${userList}">
        <span th:text="${userStat.count}"></span>
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.phone}"></span>
        <span th:text="${user.address}"></span>
    </div>
<h1 th:text="${data}">xxxx</h1>
<div th:text="${data}">xxxx</div>
<span th:text="${data}">xxxx</span>
</body>
</html>

结果截图

3 th:each遍历Map集合

controller类

@Controller
public class UserController {

    @RequestMapping("/each/map")
    public String eachMap(Model model){
        Map<Integer,Object> userMap=new HashMap<Integer,Object>();
        for (int i=0;i<10;i++){
            User user=new User();
            user.setId(i);
            user.setName("李四"+i);
            user.setPhone("100000000"+i);
            user.setAddress("河北邯郸"+i);
            userMap.put(i,user);
        }
        model.addAttribute("userMaps",userMap);
        return "eachMap";
    }
}

前端页面

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历Map集合</title>
</head>
<body>
<!--和list的一样，userMapStat可以不写-->
    <div th:each="userMap:${userMaps}">
        <span th:text="${userMapStat.count}"></span>
        <span th:text="${userMapStat.index}"></span>
        <span th:text="${userMap.key}"></span>
        <span th:text="${userMap.value}"></span>
        <span th:text="${userMap.value.id}"></span>
        <span th:text="${userMap.value.name}"></span>
        <span th:text="${userMap.value.phone}"></span>
        <span th:text="${userMap.value.address}"></span>
    </div>
</body>
</html>

结果截图

4. 综合运用

这是一个List嵌套Map嵌套list嵌套user得案例，不难，就是看着复杂。

controller类

@Controller
public class UserController {

    @RequestMapping("/each/all")
    public String eachall(Model model){
        //List->Map->list->user
        List<Map<Integer,List<User>>> myList=new ArrayList<Map<Integer,List<User>>>();
        for (int i=0;i<2;i++){
            Map<Integer,List<User>> myMap=new HashMap<Integer,List<User>>();
            for (int j=0;j<2;j++){
                List<User> myUserList=new ArrayList<User>();
                for (int k=0;k<3;k++){
                    User user=new User();
                    user.setId(k);
                    user.setName("撒旦"+k);
                    user.setPhone("999999999999"+k);
                    user.setAddress("天津"+i);
                    myUserList.add(user);
                }
                myMap.put(j,myUserList);
            }
            myList.add(myMap);
        }
        model.addAttribute("myList",myList);
        return "eachAll";
    }
}

前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>循环遍历复杂的集合</title>
</head>
<body>
    <h2>循环遍历复杂的集合 list->map->list->user</h2>
    <div th:each="myListMap:${myList}">
        <div th:each="myListMapObject:${myListMap}">
            Map的集合key:<span th:text="${myListMapObject.key}"></span>
            <div th:each="myListMapObjectList:${myListMapObject.value}">
                <span th:text="${myListMapObjectList.id}"></span>
                <span th:text="${myListMapObjectList.name}"></span>
                <span th:text="${myListMapObjectList.phone}"></span>
                <span th:text="${myListMapObjectList.address}"></span>
            </div>
        </div>

    </div>
</body>
</html>

结果截图