thymeleaf实现th:each双重多重嵌套功能博主最近在做⼀个个⼈的博客⽹站,准备⽤ thymeleaf 实现⼀个动态加载⼀⼆级⽂章分类的功能,效果如下:后台实体类代码如下:
/**
* @author 曲健磊
* @date 2019-08-22 20:28:18
* @description ⼀级分类实体类
*/
public class CateVO {
/**
* ⼀级分类id
*/
private Integer cate1Id;
/**
* ⼀级分类名称
*/
private String cate1Name;
/**
* 该⼀级分类下的⼆级分类列表
*/
private List<Cate2> cate2List;
// 省略set get⽅法
}
/**
* @author 曲健磊
* @date 2019-08-15 20:18:44thyme
* @description ⼆级分类实体类
*/
public class Cate2 {
/**
* ⼆级分类id
*/
private Integer id;
/**
* ⼆级分类名称
*/
private String cateName;
}
Controller 层的代码如下:
@Controller
@RequestMapping("/")
public class IndexController {
@Autowired
private CateService cateService;
/**
* 我配置的项⽬端⼝号是:80
* 所以,当⽤户在浏览器上输⼊:127.0.0.1:80 或 127.0.0.1 时请求会进到这个⽅法⾥
*/
@GetMapping("/")
public String defaultWebPage(HttpServletRequest request){
// 1.模拟获取所有的⼀级分类以及每个⼀级分类下的所有⼆级分类
List<CateVO> allCateList = new ArrayList<CateVO>();
// 1.1.⼀级分类
CateVO cateVO1 = new CateVO();
cateVO1.setCate1Id(1);
cateVO1.setCate1Name("⼤数据");
// 1.2.该⼀级分类下的⼆级分类列表
List<Cate2> cate2_1List = new ArrayList<Cate2>();
// 1.2.1.第⼀个⼆级分类
Cate2 cate2_1_1 = new Cate2();
cate2_1_1.setId(1);
cate2_1_1.setCateName("Hadoop");
// 1.2.2.第⼆个⼆级分类
Cate2 cate2_1_2 = new Cate2();
cate2_1_2.setId(1);
cate2_1_2.setCateName("Spark");
cate2_1List.add(cate2_1_1);
cate2_1List.add(cate2_1_2);
/
/ 1.3.把所有的⼆级分类添加到该⼀级分类下
cateVO1.setCate2List(cate2_1List);
// 1.4.把所有的⼀级分类放⼊列表中,多个的话以此类推(通常都是直接查数据库的)
allCateList.add(cateVO1);
// 2.将⼀级分类列表放⼊ request 域中。
request.setAttribute("cateList", allCateList);
// 3.返回 index.html 页⾯
return "index";
}
}
前台 html 的代码如下(简化):
<!DOCTYPE HTML>
<!-- thymeleaf的引⽤ -->
<html xmlns:th="">
<head>
<!-- 引⽤的css,js -->
</head>
<!-- 页⾯主体 -->
<body>
<ul>
<!-- 这⼀级是⼀级的分类 -->
<li th:each="cate1:${cateList}"><a th:text="${cate1.cate1Name}"></a>
<!-- 这是⼀级下的⼆级分类列表 -->
<ul>
<li th:each="cate2:${cate1.cate2List}"><a th:text="${cate2.cateName}"></a></li>
</ul>
</li>
</ul>
</body>
</html>
博主直接⽤ java 代码解释⼀下上⾯的 th:each 那⾥是什么意思吧:
// cateList 就是我们在 Controller 中向 request 域中设置的那个属性
for (CateVO cate1 : cateList) {
System.out.println(cate1.cate1Name);
// cate1这个变量现在就存在于request域中,我们可以直接调⽤它的属性和⽅法
for (Cate2 cate2 : cate1.cate2List) {
System.out.println(cate2.cateName);
// 依次类推,如果有三级分类这⾥继续调⽤cate2的属性或⽅法就可以
}
}
cate1:${cateList} 这个写法是固定的格式,冒号前的 cate1 是新定义的临时变量,cateList 是我们在 Controller 中放⼊ request 域中的变量;在⼀级分类循环⾥⾯,我们是可以直接获取刚才定义的临时变量:cate1 的。
所以,我们可以继续 th:each 遍历该⼀级分类的⼆级分类列表,三级四级以此类推。
总结
以上所述是⼩编给⼤家介绍的thymeleaf实现th:each双重多重嵌套功能,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!
如果你觉得本⽂对你有帮助,欢迎转载,烦请注明出处,谢谢!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论