Thymeleaf 实战应用
input 、textarea 赋值
【JAVA】
@RequestMapping(value = {
"formData", "" })
public String list(HttpServletRequest request, ModelMap model) {
Entity entity = xxxService.getEntity();
model.addAttribute("entity", entity);
return "test.html";
}
【HTML】
- input输入框
<input type="text" th:attr="name=${entity.name},required=${entity.propRequired}" placeholder="请输入"/>
- textarea 文本域
<textarea th:text="${entity.remarks=='null'?'':entity.remarks}" placeholder="请输入"></textarea>
复选框 判断选中
【JAVA】
@RequestMapping(value = {
"checkboxValue", "" })
public String list(HttpServletRequest request, ModelMap model) {
Entity entity = xxxService.getEntity();
model.addAttribute("entity", entity);
return "test.html";
}
【HTML】
<input type="checkbox" th:checked="${entity.prop1 eq '1'}"> aaa
<input type="checkbox" th:checked="${entity.prop2 eq '1'}"> bbb
下拉框 动态赋值 与 回显
【JAVA】
@RequestMapping(value = {
"selectList", "" })
public String list(HttpServletRequest request, ModelMap model) {
List<selectData> selectList = xxxService.getSelectList();
int type = xxxService.getType();
model.addAttribute("type", type);
model.addAttribute("selectList", selectList);
return "test.html";
}
【HTML】
- 下拉框数据填充
<select data-placeholder="请选择" id="selectData" >
<option value=" " selected>请选择</option>
<option th:each="data:${selectList}" th:value="${data.id}" th:text="${data.name}"> </option>
</select>
- 下拉框数据填充，判断，回显数据
<select>
<option value="" th:selected="${type eq ''}">请选择</option>
<option value="1" th:selected="${type eq 1}">字符型</option>
<option value="2" th:selected="${type eq 2}">整型</option>
<option value="3" th:selected="${type eq 3}">日期</option>
</select>
【JS】
- js设置下拉框选中，回显数据
<script type="text/javascript">
$("#selectData").ready(function() {
var value= "[[${type}]]";
$("#selectDataoption[value= " + value + "]").prop("selected",true);
});
</script>
循环遍历
【JAVA】
@RequestMapping(value = {
"loopTest", "" })
public String list(HttpServletRequest request, ModelMap model) {
List<Entity> dataList = xxxService.getEntityList();
Map<String,List<Entity>> dataMap = xxxService.getEntityMap();
model.addAttribute("dataList", dataList);
model.addAttribute("dataMap", dataMap);
return "test.html";
}
【HTML】
- 遍历 list 数据：循环生成表格数据
<table>
<head>
<tr>
<th>ID</th>
<th>名称</th>
<th>类型</th>
<th>时间</th>
<th>是否可用</th>
</head>
<body>
<tr th:each="data : ${dataList}" >
<td th:text="${data.id}"></td>
<td th:text="${data.name}"></td>
<td th:switch="${data.type}">
<span th:case="1">字符型</span>
<span th:case="2">整型</span>
<span th:case="3">日期</span>
</td>
<td th:text="${#dates.format(data.createDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<span th:if="${data.usable} eq '1'">
<i class="fa fa-check"></i>
</span>
</td>
</tr>
</body>
</table>
- 遍历map数据
<div th:each="dataEntry,dataStat: ${dataMap}" >
<div> [[${dataEntry.key}]] </div>
<div th:each="data: ${dataEntry.value}">
<div>
<dt>[[${data.id}]]: </dt>
<dd>[[${data.name}]]</dd>
</div>
</div>
</div>
超链接 url传参
【JAVA】
@RequestMapping(value = {
"formData", "" })
public String list(HttpServletRequest request, ModelMap model) {
Entity entity = xxxService.getEntity();
model.addAttribute("entity", entity);
return "test.html";
}
【HTML】
<a th:href="@{test/form(id=${entity.id},name=${entity.name})}">超链接1</a>
<a th:href="@{test/form?id='+${entity.id}}+'&name='+${entity.name}">超链接2</a>