thymeleaf实现th:each双重多重嵌套功能

技术  /  管理员 发布于 7年前   344

博主最近在做一个个人的博客网站，准备用 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:44 * @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="http://www.thymeleaf.org"><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双重多重嵌套功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


  • 上一条：
    超好用：免费的图床
    下一条：
    使用阿里大于(大鱼)平台进行发送手机验证码的流程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客