thymeleaf 如何用th:each 做条件遍历
更多內容，點擊了解：?https://how2j.cn/k/springboot/springboot-interation/1740.html
目錄
步驟?1?:?基于前面的知識點
步驟?2?:?先運行，看到效果，再學習
步驟?3?:?模仿和排錯
步驟?4?:?TestController
步驟?5?:?普通遍歷
步驟?6?:?帶狀態的遍歷
步驟?7?:?結合 select
步驟?8?:?結合 單選框
步驟?9?:?完整的 test.html
步驟?10?:?重啟測試
步驟?1?:?基于前面的知識點
本知識點是建立在上一個知識點可運行項目的基礎上進行的改進,所以最好把上個知識點理解和消化了.
步驟?2?:?先運行，看到效果，再學習
老規矩，先下載下載區(點擊進入)的可運行項目，配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。?
運行Application.java 然后訪問如下測試地址：
http://127.0.0.1:8080/thymeleaf/test |
可以看到如圖所示的集中常見遍歷需求
1. 單純表格
2. 取status值的表格
3. 下拉框
4. 單選框
步驟?3?:?模仿和排錯
在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。?
模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較正確答案?( 可運行項目 ) 和自己的代碼，來定位問題所在。?
采用這種方式，學習有效果，排錯有效率，可以較為明顯地提升學習速度，跨過學習路上的各個檻。?
推薦使用diffmerge軟件，進行文件夾比較。把你自己做的項目文件夾，和我的可運行項目文件夾進行比較。?
這個軟件很牛逼的，可以知道文件夾里哪兩個文件不對，并且很明顯地標記出來?
這里提供了綠色安裝和使用教程：diffmerge 下載和使用教程
步驟?4?:?TestController
準備集合 List<Product> 用于視圖上顯示。?
需要注意的是 第5個產品用的是 currentProduct
package?com.how2java.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.how2java.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,"product e",?200); ????????boolean?testBoolean =?true; ????????List<Product> ps =?new?ArrayList<>(); ????????ps.add(new?Product(1,"product a",?50)); ????????ps.add(new?Product(2,"product b",?100)); ????????ps.add(new?Product(3,"product c",?150)); ????????ps.add(new?Product(4,"product d",?200)); ????????ps.add(currentProduct); ????????ps.add(new?Product(6,"product f",?200)); ????????ps.add(new?Product(7,"product g",?200));??????? ????????m.addAttribute("ps", ps); ????????m.addAttribute("htmlContent", htmlContent); ????????m.addAttribute("currentProduct", currentProduct); ????????m.addAttribute("testBoolean", testBoolean); ????????return?"test"; ????} } |
步驟?5?:?普通遍歷
使用 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> |
步驟?6?:?帶狀態的遍歷
使用 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> |
步驟?7?:?結合 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> |
步驟?8?:?結合 單選框
單選框也是同樣的做法，其中 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> |
步驟?9?:?完整的 test.html
完整的 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+999}"?></p> </div> <div?class="showing"> ????<div?th:replace="include::footer1"?></div> ????<div?th:replace="include::footer2(2015,2018)"?></div> </div> </body> </html> |
步驟?10?:?重啟測試
重新運行 Application.java, 然后測試
http://127.0.0.1:8080/thymeleaf/test |
更多內容，點擊了解：?https://how2j.cn/k/springboot/springboot-interation/1740.html
總結
以上是生活随笔為你收集整理的thymeleaf 如何用th:each 做条件遍历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 单例模式 构函数,php单例模式
- 下一篇： 如何通过扫码自动复制口令 并打开抖音时自