第六章：thymeleaf页面模版-6. 迭代输出

时间 2019-11-13

标签第六 thymeleaf 页面模版迭代输出繁體版

原文原文链接

数据迭代是模板语言之中一个重要组成部分，也是全部项目开发之中的重要组成部分那么下面将进行迭代操做的实现而在实际的开发之中进行数据的迭代类型每每会有 List Map 类型javascript

1.创建一个控制器在控制器之中追加一个List集合数据html

package cn.mldn.microboot.controller;

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

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

import cn.mldn.microboot.util.controller.AbstractBaseController;
import cn.mldn.microboot.vo.Member;

@Controller
public class MemberController extends AbstractBaseController {
	
	@RequestMapping(value = "/member/list", method = RequestMethod.GET)
	public String list(Model model) {
		List<Member> allMembers = new ArrayList<Member>();
		for (int x = 0; x < 10; x++) {
			Member vo = new Member();
			vo.setMid(101L + x);
			vo.setName("啊三 - " + x);
			vo.setAge(9);
			vo.setSalary(99999.99);
			vo.setBirthday(new Date());
			allMembers.add(vo) ;
		}
		model.addAttribute("allMembers", allMembers);
		return "member/member_list";
	}
}

2.创建member_list.html，创建的时候请注意好你所在的目录java

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type"  content="text/html;charset=UTF-8" >
    <title>模板集合遍历</title>
</head>
<body>
  <table style="border: red" border="1">
      <tr><td>mid</td> <td>姓名</td><td>年龄</td></tr>
       <tr th:each="user,userarr:${user}">
 
          <td th:text="${user.mid}"></td>
           <td th:text="${user.name}"></td>
           <td th:text="${user.age}"></td>
       </tr>
 
 
  </table>
</body>
</html>

3.并且最为关键的是，使用thymeleaf 输出的时候还能够输出更增强大的内容。web

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<script type="text/javascript" th:src="@{/js/main.js}"></script> 
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<table>
		<tr><td>No.</td><td>MID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
		<tr th:each="member,memberStat:${allMembers}">
			<td th:text="${memberStat.index + 1}"/>
			<td th:text="${member.mid}"/>
			<td th:text="${member.name}"/>
			<td th:text="${member.age}"/>
			<td th:text="${memberStat.even}"/>
			<td th:text="${memberStat.odd}"/>
		</tr>
	</table>
</body>
</html>

4. 除了输出List集合以外那么在实际的开发之中 Map 集合也是常常所输出的操做形式，因此下面来观察如何进行Map集合的迭代输出。对于Map 集合的输出确定要使用的是Map.Entry接口完成，对于Map.Entry 接口只可以使用getKey()或者getValue()方法得到内容spring

package cn.mldn.microboot.controller;

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

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

import cn.mldn.microboot.util.controller.AbstractBaseController;
import cn.mldn.microboot.vo.Member;

@Controller
public class MemberController extends AbstractBaseController {
	@RequestMapping(value = "/member/map", method = RequestMethod.GET)
	public String map(Model model) {
		Map<String,Member> allMembers = new HashMap<String,Member>();
		for (int x = 0; x < 10; x++) {
			Member vo = new Member();
			vo.setMid(101L + x);
			vo.setName("啊三 - " + x);
			vo.setAge(9);
			vo.setSalary(99999.99);
			vo.setBirthday(new Date());
			allMembers.put("mldn-" + x, vo);
		}
		model.addAttribute("allMembers", allMembers);
		return "member/member_map";
	}
}

5.在进行页面迭代输出的时候，每一次取得迭代数据类型必定都是Map.Entry 对象，因此必定要经过getKey()、getValue() 方法获取相应的数据内容app

member_map.htmlui

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<script type="text/javascript" th:src="@{/js/main.js}"></script> 
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<table>
		<tr><td>No.</td><td>KEY</td><td>MID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
		<tr th:each="memberEntry,memberStat:${allMembers}">
			<td th:text="${memberStat.index + 1}"/>
			<td th:text="${memberEntry.key}"/>
			<td th:text="${memberEntry.value.mid}"/>
			<td th:text="${memberEntry.value.name}"/>
			<td th:text="${memberEntry.value.age}"/>
			<td th:text="${memberStat.even}"/>
			<td th:text="${memberStat.odd}"/>
		</tr>
	</table>
</body>
</html>