jquer each 遍历的结果不显示 null_SpringBoot系列(三十一)- Thymeleaf如何用th:each 做条件遍历
步骤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个产品用的是 currentProductpackage
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
jquer each 遍历的结果不显示 null_SpringBoot系列(三十一)- Thymeleaf如何用th:each 做条件遍历相关推荐
- thymeleaf 如何用th:each 做条件遍历
更多内容,点击了解: https://how2j.cn/k/springboot/springboot-interation/1740.html 目录 步骤 1 : 基于前面的知识点 步骤 2 : 先 ...
- 三十一、二叉排序树的创建、删除和遍历
一.实际需求 给你一个数列 (7, 3, 10, 12, 5, 1, 9),要求能够高效的完成对数据的查询和添加 解决方案一:使用数组 数组未排序, 优点:直接在数组尾添加,速度快. 缺点:查找速度慢 ...
- vue使用v-for遍历本地图片不显示
vue使用v-for遍历本地图片不显示的问题 1.项目中本地有一组图片需要循环遍历展示,在使用v-for遍历之后发现无法展示图片,解决方法如下. 2.首先,正常的图片路径如下,但是想要展示不能按正常的 ...
- foreach 二维java_教你如何用for和foreach循环遍历java中的二维数组
一:先来说说for和foreach循环的区别 for和foreach的区别 foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach ...
- ABAP屏幕上显示LIST的三种方法
屏幕上显示LIST的三种方法 在abap开发中,经常有用户提出list的需求,实现的方法很多,通常用的有以下三种总结一下供大家参考: 1:手工添加-就是根据需要把LIST要显示的内容一条一条加到LIS ...
- Java黑皮书课后题第4章:*4.6(图上的随机点)编写一个程序,产生一个圆心位于(0,0)原点半径为40的圆上面的三个随机点,显示由这三个随机点组成的三角形的三个角的度数
*4.6(图上的随机点)编写一个程序,产生一个圆心位于(0,0)原点半径为40的圆上的三个随机点,显示由这三个随机点组成的三角形的三个角的度数 题目 题目概述 破题 代码 题目 题目概述 *4.6(图 ...
- 二叉树的中序遍历非递归方法(算法导论第三版12.1-3)
二叉树的中序遍历非递归方法(算法导论第三版12.1-3) 1⃣️用栈实现 template<typename T> void inorder_tree_walk_non_recursion ...
- 【正点原子FPGA连载】第三十一章RTC实时时钟数码管显示实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
- Qt显示pdf系列1——序言,扯淡,选择相关库及方式等
序 一尝试显示office 二尝试打开pdf 1尝试打开pdf文件 2选择开源库 三总结 前言:这一阵子都在研究qt下显示office和pdf相关方案,需求大致为从ftp上下载office或者pdf ...
最新文章
- 前端Vue学习之路(一)-初识Vue
- GARFIELD@02-17-2005
- Nginx报错request entity too large的解决方案
- bat判断3306端口号是否被占用
- word List 11
- GIS - 百度地图 城市中心点坐标
- FLASH闪存原理与实验
- cad动态块制作翻转_cad动态块制作教程
- 网站遭到XSS挂马的危害性
- 关闭计算机界面,windows7 关机一直停留在“正在关机”界面的解决方法
- python selenium设置chrome浏览器保持登录方式
- 食品微商怎么靠快手引流,微商如何巧妙借助短视频引流
- 什么都可以丢,唯独不能丢了你
- kitti rotation,label等细节相关
- 一、编程语言与Python介绍
- Qt中多线程的一种使用
- 基于GraphHooper的离线导航软件实现
- LVS原理详解(3种工作方式8种调度算法)
- html修改logo,教你用CSS3打造HTML5的Logo
- 最全面最权威的微软官方教程下载