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->userList<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>

结果截图

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

JavaScript遍历数组、Map
<script>var arr = [3,4,5,6,34]//打印下标for(var x in arr){console.log(x)}</script> <scrip ...
js中遍历数组加到新数组_javaScript 遍历数组方法总结
数组和对象一样都是引用数据类型,数组中的数据按照顺序排列,从0开始,把这个叫做索引,也叫做下标,把数组中的每个数据叫做元素,或者简称元 . 数组的新建方式有字面量创建和构造函数创建两种方法字面量创建 ...
JS遍历数组，对象，字符串
数组遍历 for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显 for(var i=0,len=arr.length;i<len;i++){console.log("元 ...
linux jq 遍历数组,jquery怎么遍历数组？
jquery怎么遍历数组?下面本篇文章就来给大家介绍一下使用jquery遍历数组的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.for循环:var arr = new ...
SpringBoot Thymeleaf使用教程（实用版）
SpringBoot Thymeleaf使用教程(实用版) 使用Thymeleaf 三大理由: 简洁漂亮容易理解完美支持HTML5 使用浏览器直接打开页面不新增标签只需增强属性学习目标快速 ...
SpringBoot thymeleaf使用方法，thymeleaf模板迭代
SpringBoot thymeleaf使用方法,thymeleaf模板迭代 SpringBoot thymeleaf 循环List.Map ============================= ...
C# winform DataGridView 常见属性
C# winform DataGridView 常见属性 C# winform DataGridView 属性说明 ① 取得或者修改当前单元格的内容 ② 设定单元格只读 ③ 不显示最下面的新行 ④ 判 ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
Java项目:在线电子商城管理系统(java+SpringBoot+Thymeleaf+bootstrap+jQ+layui+maven+mysql)
源码获取:博客首页 "资源" 里下载! 项目介绍本项目分为管理员与普通用户两种角色, 管理员角色包含以下功能: 发货,后台登录后首页,商品管理,商城类别增删改查,用户管理,管理员 ...

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

1 th:each遍历数组

2 th:each遍历List集合

3 th:each遍历Map集合

4. 综合运用

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

最新文章

热门文章