how2j.cn

下载区
文件名 文件大小
thymeleaf.rar 5k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 基于前面的知识点   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : TestController   
步骤 5 : 普通遍历   
步骤 6 : 带状态的遍历   
步骤 7 : 结合 select   
步骤 8 : 结合 单选框   
步骤 9 : 完整的 test.html   
步骤 10 : 重启测试   

步骤 1 :

基于前面的知识点

edit
本知识点是建立在上一个知识点可运行项目的基础上进行的改进,所以最好把上个知识点理解和消化了.
步骤 2 :

先运行,看到效果,再学习

edit
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
运行Application.java 然后访问如下测试地址:

http://127.0.0.1:8080/thymeleaf/test

可以看到如图所示的集中常见遍历需求
1. 单纯表格
2. 取status值的表格
3. 下拉框
4. 单选框
先运行,看到效果,再学习
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
准备集合 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"; } }
使用 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>
<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 :

带状态的遍历

edit
使用 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>
还是用 th:each,但是放在option元素上,就可以遍历出多个下拉框出来了。
其中 th:selected 表示被选中的项。
结合 select
<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>遍历 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>
单选框也是同样的做法,其中 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>
<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

edit
完整的 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>
重新运行 Application.java, 然后测试

http://127.0.0.1:8080/thymeleaf/test


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-03-17 下拉框为什么展开的?怎么合上去
MJ

下拉框为什么展开的?怎么合上去




1 个答案

mcammo
答案时间:2020-07-13
去掉“size=3” 就行



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-08-08 为什么单选框我把name给去掉就可以复选了,但是加上name属性就不行了
绝世好剑

<input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" />




1 个答案

李文浩
答案时间:2019-08-17
http://how2j.cn/k/html/html-checkbox/193.html?p=79332 单选框是通过name分组的.



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-06-25 p.id==currentProduct.id中的==是什么含义呢
2019-06-20 status.even 报错
2019-03-16 这个颜色是怎么搞的




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 JAVA 框架-SpringBoot-遍历 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图