步驟 1 : 可運行項目
本知識點是建立在 上一個知識點 的基礎上進行的改進
首先下載一個簡單的可運行項目作為演示：網盤鏈接：https://t.cn/A6AlcLHm
下載后解壓，比如解壓到 E:\project\springboot 目錄下
步驟 2 : 修改 TestController
准備集合 List
需要注意的是 第5個產品用的是 currentProduct
package com.ryan.springboot.web;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.ryan.springboot.pojo.Product;
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model m) {
String htmlContent = "<p style='color:red'> 火星紅 </p>";
Product currentProduct =new Product(5,"夢卻了無影蹤", 666);
boolean testBoolean = true;
List<Product> ps = new ArrayList<>();
ps.add(new Product(1,"好像愛這個世界啊", 666));
ps.add(new Product(2,"瘋人院", 666));
ps.add(new Product(3,"與火星的孩子對話", 666));
ps.add(new Product(4,"七重人格", 666));
ps.add(currentProduct);
ps.add(new Product(6,"神樹", 666));
ps.add(new Product(7,"降臨", 666));
ps.add(new Product(8,"新世界", 666));
m.addAttribute("ps", ps);
m.addAttribute("htmlContent", htmlContent);
m.addAttribute("currentProduct", currentProduct);
m.addAttribute("testBoolean", testBoolean);
return "test";
}
}
步驟 3 : 普通遍歷
使用 th:each 遍歷
<div class="showing">
<h2>遍歷</h2>
<table>
<thead>
<tr>
<th>id</th>
<th>產品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr th:each="p: ${ps}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</div>
步驟 4 : 帶狀態的遍歷
使用 th:each="p,status: ${ps} 方式遍歷就把狀態放在 status 里面了， 同時還用3元表達式判斷奇偶
th:class="${status.even}?'even':'odd'"
status里還包含了如下信息：
- index 屬性, 0 開始的索引值
- count 屬性, 1 開始的索引值
- size 屬性, 集合內元素的總量
- current 屬性, 當前的迭代對象
- even/odd 屬性, boolean 類型的, 用來判斷是否是偶數個還是奇數個
- first 屬性, boolean 類型, 是否是第一個
- last 屬性, boolean 類型, 是否是最后一個
<div class="showing">
<h2>帶狀態遍歷</h2>
<table>
<thead>
<tr>
<th>index</th>
<th>id</th>
<th>產品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}">
<td th:text="${status.index}"></td>
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</div>
步驟 5 : 結合 select
還是用 th:each,但是放在 option 元素上，就可以遍歷出多個下拉框出來了。
其中 th:selected 表示被選中的項。
<div class="showing">
<h2>遍歷 select </h2>
<select size="3">
<option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}" ></option>
</select>
</div>
步驟 6 : 結合 單選框
單選框也是同樣的做法，其中 th:checked 用於判斷是否選中
<div class="showing">
<h2>遍歷 radio </h2>
<input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" />
</div>
步驟 7 : 完整的 test.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
<style>
h2{
text-decoration: underline;
font-size:0.9em;
color:gray;
}
</style>
</head>
<body>
<div class="showing">
<h2>遍歷</h2>
<table>
<thead>
<tr>
<th>id</th>
<th>產品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr th:each="p: ${ps}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</div>
<div class="showing">
<h2>帶狀態遍歷</h2>
<table>
<thead>
<tr>
<th>index</th>
<th>id</th>
<th>產品名稱</th>
<th>價格</th>
</tr>
</thead>
<tbody>
<tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}">
<td th:text="${status.index}"></td>
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>
</tbody>
</table>
</div>
<div class="showing">
<h2>遍歷 select </h2>
<select size="3">
<option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}" ></option>
</select>
</div>
<div class="showing">
<h2>遍歷 radio </h2>
<input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" />
</div>
<div class="showing">
<h2>條件判斷</h2>
<p th:if="${testBoolean}" >如果 testBoolean 是 true ，本句話就會顯示</p>
<p th:if="${not testBoolean}" >取反 ，所以如果 testBoolean 是 true ，本句話就不會顯示</p>
<p th:unless="${testBoolean}" >unless 等同於上一句，所以如果 testBoolean 是 true ，本句話就不會顯示</p>
<p th:text="${testBoolean}?'當 testBoolean 為真的時候，顯示本句話，這是用三相表達式做的':''" ></p>
</div>
<div class="showing">
<h2>顯示 轉義和非轉義的 html 文本</h2>
<p th:text="${htmlContent}" ></p>
<p th:utext="${htmlContent}" ></p>
</div>
<div class="showing">
<h2>顯示對象以及對象屬性</h2>
<p th:text="${currentProduct}" ></p>
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
</div>
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式顯示屬性</h2>
<p th:text="*{name}" ></p>
</div>
<div class="showing">
<h2>算數運算</h2>
<p th:text="${currentProduct.price+222}" ></p>
</div>
<div class="showing">
<div th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2020,2200)" ></div>
</div>
</body>
</html>
步驟 8 : 重啟測試
重新運行 Application.java, 然后測試
顯示效果：
更多關於 Springboot_thymeleaf_遍歷 詳細內容，點擊學習： https://t.cn/A6AgcOFw