Thymeleaf动态加载select下拉框,并选中后台返回的对应类型作为回显

Thyme leaf应该翻译成百里香的叶子(spring boot推荐使用的页面模板,比JSP帅气一些),驼峰命名ThymeLeaf,其中L显得较为突兀,就像ipad或者iphone如果P小写那么显得p腿太长了,不协调,iPad或者iPhone,好了,这是我瞎编的,我这样理解不影响使用,毕竟这个单词查不到,不好读,所以我喜欢拆开方便理解.(标题的重点在最后)

pom依赖(spring-boot-starter-thymeleaf,不然页面404就是家常便饭了哈)

<!--thymeleaf百里香叶页面--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

配置文件配置(yml也可以)

#thymeleaf配置
#模板的模式，支持如：HTML、XML、TEXT、JAVASCRIPT等
spring.thymeleaf.mode=HTML5
#编码，可不用配置
spring.thymeleaf.encoding=UTF-8
#内容类别，可不用配置
spring.thymeleaf.servlet.content-type=text/html
#开发配置为false，避免修改模板还要重启服务器
spring.thymeleaf.cache=false
#配置模板路径，默认就是templates，可不用配置
#spring.thymeleaf.prefix=classpath:/templates/

常用标签(类似jstl,EL表达式)

th:action  定义后台控制器路径
th:each  循环语句
th:field  表单字段绑定
th:href 定义超链接
th:id  div标签中的id声明，类似html标签中的id属性
th:if  条件判断语句
th:include  布局标签，替换内容到引入文件
th:fragment  布局标签，定义一个代码片段，方便其它地方引用
th:object  替换对象
th:src  图片类地址引入
th:text  显示文本
th:value  属性赋值
常用函数：
#dates  日期函数
#lists  列表函数
#arrays  数组函数
#strings  字符串函数
#numbers  数字函数
#calendars  日历函数
#objects  对象函数
#bools  逻辑函数

例子(后台方法)

    /*** 去添加页时把数据填充到model,渲染模板再把model数据进行渲染把下拉框填充* @param model* @return*/@RequestMapping("/goAdd")public String goAdd(Model model){List<Team> teamList = teamService.getTeamByCondition(null);System.out.println(teamList);List<PlayerRole> playerRoleList = playerRoleService.getPlayerRoleByCondition(null);System.out.println(playerRoleList);model.addAttribute("teamList",teamList);model.addAttribute("playerRoleList",playerRoleList);return "addPlayer";}

HTML页面例子(以前写在JSP,现在直接写在HTML,以下拉框为例子,注意HTML头部)

<html xmlns:th="http://www.w3.org/1999/xhtml">

 <div class="layui-form-item"><label class="layui-form-label">选择角色</label><div class="layui-input-block"><select name="playerRole" lay-verify="required"><option value=""></option><!--playerRoleList后台获取到的集合th:each进行遍历,playerRole作为集合对象的变量名称,th:value="${playerRole.id}作为value值th:text="${playerRole.name}"作为需要显示的内容--><option th:each="playerRole:${playerRoleList}" th:value="${playerRole.id}"th:text="${playerRole.name}"></option></select></div></div>

说明:我是使用layui提供的模板,js获取数据和表单都是layui的,所以代码只展示重点,最后说明一下,你可以把Thymeleaf理解为可以直接在HTML写Thymeleaf的标签,注意html头部导入xmlns:th="http://www.w3.org/1999/xhtml"就行了

回显需求概述:比如获取到球员的类型是中锋,并选中

代码th:field="*{playerInfo.playerRole}"是选中的关键

            <div class="layui-form-item"><label class="layui-form-label">选择角色</label><div class="layui-input-block"><!--th:field="*{playerInfo.playerRole}" playerInfo表示球员实体,playerRole球员实体的属性,比如 playerRole获得的是2(1:对应前锋,2:中锋,3:后卫),那么就显示中锋,*代表所有的都会匹配显示--><select name="playerRole" lay-verify="required" th:field="*{playerInfo.playerRole}"><option value=""></option><!--playerRoleList后台获取到的集合th:each="playerRole:${playerRoleList}"  遍历的写法,相当于foreach,playerRole表示变量(实体),${playerRoleList}表示需要遍历的集合th:value="${playerRole.id}作为value值    ${playerRole.id}球员角色ID作为value值th:text="${playerRole.name}"            作为下拉框需要显示的内容th:each="playerRole:${playerRoleList}"--><option th:each="playerRole:${playerRoleList}"th:value="${playerRole.id}"th:text="${playerRole.name}"></option></select></div>

如有疑问请评论,及时回复.

spring boot2 Thymeleaf模板引擎的基本使用相关推荐

Spring Boot集成Thymeleaf模板引擎
一.Thymeleaf 模板介绍 Spring Boot 推荐使用Thymeleaf 来代替传统开发中的JSP,那么什么是Thymeleaf 模板引擎呢?下面就来简单的介绍一下. Thymeleaf ...
Spring Boot整合Thymeleaf模板引擎
转载自 Spring Boot整合Thymeleaf模板引擎什么是Thymeleaf Thymeleaf是一款用于渲染XML.XHTML.HTML5内容的模板引擎.类似Velocity,FreeMa ...
发送邮件功能：使用Spring Email、邮件工具类、使用Thymeleaf模板引擎发送html邮件
发送邮件 Spring Email 开启自己邮箱的POP3/SMTP服务导入spring mail 依赖 <!-- https://mvnrepository.com/artifact/org ...
玩转springboot：thymeleaf模板引擎入门程序
一.前言常用的模板引擎有:JSP.Velocity.Freemarker.Thymeleaf 但是,Springboot默认是不支持JSP的,默认使用thymeleaf模板引擎.而且,语法更简单,功 ...
九、SpringBoot集成Thymeleaf模板引擎
Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:"赛母李府",大部分中国 ...
java 模板引擎_SpringBoot入门系列（四）如何整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...
Java Mail+Thymeleaf模板引擎实现发送HTML格式邮件
Java Mail+Thymeleaf模板引擎实现发送HTML格式邮件基于Spring boot 1.5,Spring boot 2.x请使用Spring boot mail 1.依赖坐标 // b ...
thymeleaf模板引擎
文章目录前言一.thymeleaf是什么? 二.使用步骤 1.导入坐标 2.Spring Boot项目中创建controller 3.分析源码 4.配置success.html 5.启动主配置文件 ...
java 模板引擎_Spring Boot 如何快熟整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...

spring boot2 Thymeleaf模板引擎的基本使用

Thymeleaf动态加载select下拉框,并选中后台返回的对应类型作为回显

spring boot2 Thymeleaf模板引擎的基本使用相关推荐

最新文章

热门文章