Thymeleaf基本使用方法及注意事项
数据的基本展示
<span id="oppoName" th:text="${oppo.oppoName}">xxx</span>
页面效果如下:
controler返回集合的遍历(以list为例)
-
获取集合的大小
<span>您负责的商机共</span>
<span style="font-size: 26px;font-weight: bold;color: #fc6f45;" th:text="${oppoList.size()}">x</span>
<span>个</span>
页面效果如下:
-
遍历集合
<div class="card" th:each="oppoList:${oppoList}">
<div class="card-head">
<span>商机名称:</span>
<span th:text="${oppoList.oppoName}">区域一</span>
</div>
<div class="card-body detailContent">
<div class="row">
<div class="col-md-4 message-group">
<span class="labelSapn">客户名称:</span>
<span class="contentSpan" th:text="${oppoList.custName}">x</span>
</div>
<div class="col-md-4 message-group">
<span class="labelSapn">行业:</span>
<span class="contentSpan" th:text="${oppoList.industry}">x</span>
</div>
</div>
</div>
</div>
页面效果如下:
在JavaScript中使用Thymeleaf标签
首先需要在<script th:inline="javascript"></script>中声明内联,才可以在js中使用。
以在Ajax中获取为例。
<script th:inline="javascript">
function insertAjax() {
var oppoId = $("#oppoId").val()
var oppoName = [[${oppo.oppoName}]]
$.ajax({
//url路径
url: "/team/insert",
data: {"oppoId": oppoId,
"oppoName":oppoName},
//提交方式
type: "post",
//返回值类型
// dataType: "json",
//异步提交是否开启
async: false,//关闭异步请求
//请求成功后的回调函数
success: function (pager) {
alert("添加成功!");
loadData();
},
//出现错误或者异常时的处理方法
error: function () {
console.log("查询出错")
}
});
}
</script>