第六章：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。