Thymeleaf入门之常用的基本语法
Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
创建HTML文件时写
<html xmlns:th="http://www.thymeleaf.org">
这样,下文才能正确使用th:*形式的标签!
1. 展示type为text文本、标签为p、span 的数据 th:value
<input type="text" class="form-control" name="coreName" th:value="${coreName}" readonly>
2 . 展示 textarea 文本域数据 th:text
<textarea id="riskRemark" class="form-control risk" th:text="${signProject.riskRemark}" name="riskRemark"></textarea>
3. 展示时间格式化数据 例如 2018-09-09 02:03:02 展示成 2018-09-09
<td th:if="${#lists.isEmpty(item.repaymentTime)}" th:text=null></td>
<td th:if="${not #lists.isEmpty(item.repaymentTime)}" th:text="${#dates.format(item.repaymentTime,'yyyy-MM-dd HH:mm:ss')}"></td>
//上面一行必须写,判断是否为空,若为空,则使用null在表格中的一列占位,不判断就会报错,空指针
4. 展示数字千分位数据 例如387524 展示成397,524
<input id="account" placeholder="请输入(元)" name="account"
class="form-control" type='text' th:value="${#numbers.formatDecimal(borrowApplyVO.account,3,'COMMA',2,'POINT')}" readonly>
5. 展示拼接数据 例如a=3 b=天 如何展示成3天
th:value="${midProductVO.productTimeLimit} +'天'"
6. 后台传递过来的list数据 前台怎么判断是否为空
<td th:if="${#lists.isEmpty(item.repaymentTime)}" th:text=null></td>
7. 后台传递一个判断标识前台怎么根据这个做展示 例如flag=1时展示到期日 flag=2时展示期限
<label class="col-sm-2 control-label">是否上市:</label>
<div class="col-sm-3" th:unless="${customCompanyDo.companyLaunch}">
<input value="" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq ''">
<input value="" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq 0">
<input value="是" name="companyLaunch" class="form-control" type="text">
</div>
<div class="col-sm-3" th:if="${customCompanyDo.companyLaunch} eq 1">
<input value="否" name="companyLaunch" class="form-control" type="text">
</div>
注释:上述分别是customCompanyDo.companyLaunch等于0、1、空、以及不是这三种情况的数据,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。
8. 后台传递的List里 若DO中的属性age为null 怎么展示
方法一:
<label class="col-sm-3 control-label">选择产品模板:</label>
<div class="col-sm-8">
<select data-placeholder="--选择类别--" name="templateId" id="type" class="form-control chosen-select" tabindex="2" onchange="getfocus()" required>
<option value="">请选择</option>
<option th:each="list : ${list}" th:value="${list.id}" th:text="${list.name}" th:selected="${list.id eq templateId}"> </option>
</select>
</div>
方法二:
<select data-placeholder="--选择类别--" name="type" id="type" class="form-control chosen-select" tabindex="2">
<option value="">-- 选择类别 --</option>
<option th:each="oaNotifyType : ${oaNotifyTypes}" th:value="${oaNotifyType.value}" th:text="${oaNotifyType.name}" th:if="${oaNotifyType.remarks == checked}" th:selected="selected"></option>
</select>
注释:selected中可以放一个等值判断"${list.id eq templateId}",也可以放“selected”
9. 使用thymeleaf如何循环? th:each
<select data-placeholder="--选择类别--" name="type" id="type" class="form-control chosen-select" tabindex="2">
<option value="">-- 选择类别 --</option>
<option th:each="oaNotifyType : ${oaNotifyTypes}" th:value="${oaNotifyType.value}" th:text="${oaNotifyType.name}" th:if="${oaNotifyType.remarks == checked}" th:selected="selected"></option>
</select>
注释:
(01)oaNotifyTypes是后台传过来的,前后台参数必须同名,使用oaNotifyType
(02)获取属性,th:value = “${oaNotifyType.value}”
用来存储数据
th:text="${oaNotifyType.name}"
用来在前台展示
(03)判断th:if="${oaNotifyType.remarks == checked}"
, oaNotifyType
的属性remarks值为checked时,将oaNotifyType 在下拉框中默认选中
10. 使用thymeleaf如何使用switch? th:switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>
11. 使用thymeleaf如何使用超链接? th:href/th:src
用来配合link、src、href使用的语法,类似的标签有:th:href和th:src
使用情况一:用于引入css文件 @{…}
`<link href="/css/plugins/select2/select2.min.css" th:href="@{/css/plugins/select2/select2.css}" rel="stylesheet">`
使用情况二:跳转超链接 ${…}
`<a href="graph_echarts.html" class="J_menuItem" th:href="${cmenu.attributes.url}">
<i class="fa fa fa-bar-chart-o" th:class="${cmenu.attributes.icon}"></i>
<span class="nav-label" th:text="${cmenu.text}">基础信息</span>
</a>`
12. 使用thymeleaf跳转页面? th:onclick
<td id="href"><a href="javascript:void(0)" th:onclick="'javascript:subRepayment('+${item.assetId}+')' "th:text="${item.assetName}" style="color: #1C86EE;"></a></td>//点击超链接,跳转到js页面中的subRepayment方法