【技术】浅谈 Thymeleaf 中 th:field 的用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了【技术】浅谈 Thymeleaf 中 th:field 的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

SpringBoot 项目中 Thymeleaf 表单页面填充数据是非常常见的。最常见的当属修改页面。从表格的操作列点击修改进入到修改页面填充要修改的数据。这一类的需求中，普通输入框的数据填充是很简单的，但是单选框、复选框、下拉框等组件的数据填充可能要稍稍动动脑子。你会怎么实现呢？

<form>
	输入框：<input type="text" name="user"/><br>
	单选框：<input type="radio" name="sex" value="1"/>男
	       <input type="radio" name="sex" value="0"/>女<br>
	复选框：<input type="checkbox" name="hobby" value="1"/>运动
	       <input type="checkbox" name="hobby" value="2"/>学习
	       <input type="checkbox" name="hobby" value="3"/>听音乐
	       <input type="checkbox" name="hobby" value="4"/>旅游<br>
	下拉框：<select name="major">
	            <option value="1">选项1</option>
	            <option value="2">选项2</option>
	            <option value="3">选项3</option>
	        </select>
</form>

方案1：th:if

最直观的写法使用 th:if 判断，填充数据，这种写法比较适用于页面的组件内容也是动态生成的情况或者页面组件比较少的情况。下列复选框和下拉框值较多，判断的方式不适合。

<form>
	输入框：<input type="text" name="user" th:value="${obj.user}"/><br>
	单选框：
	   <span th:if="${obj.sex == '1'}">
	       <input type="radio" name="sex" value="1" checked/>男
	       <input type="radio" name="sex" value="0"/>女<br>
	   </span>
	   <span th:if="${obj.sex == '0'}">
	       <input type="radio" name="sex" value="1"/>男
	       <input type="radio" name="sex" value="0" checked/>女<br>
	   </span>
	复选框：<input type="checkbox" name="hobby" value="1"/>运动
	       <input type="checkbox" name="hobby" value="2"/>学习
	       <input type="checkbox" name="hobby" value="3"/>听音乐
	       <input type="checkbox" name="hobby" value="4"/>旅游<br>
	下拉框：<select name="major">
	            <option value="1">选项1</option>
	            <option value="2">选项2</option>
	            <option value="3">选项3</option>
	        </select>
</form>

方案2：JS 脚本

基于 JS 脚本填充数据。注意：<script th:inline="javascript" >

<form>
	输入框：<input type="text" name="user"/><br>
	单选框：<input type="radio" name="sex" value="1"/>男
	       <input type="radio" name="sex" value="0"/>女<br>
	复选框：<input type="checkbox" name="hobby" value="1"/>运动
	       <input type="checkbox" name="hobby" value="2"/>学习
	       <input type="checkbox" name="hobby" value="3"/>听音乐
	       <input type="checkbox" name="hobby" value="4"/>旅游<br>
	下拉框：<select name="major">
	            <option value="1">选项1</option>
	            <option value="2">选项2</option>
	            <option value="3">选项3</option>
	        </select>
</form>
<script th:inline="javascript" >
    // 基于属性选择器，先选组件，在基于值，选择默认要填充的对象。
	$("input[name='user']").val([[${obj.user}]]);
	$("input[name='sex'][value='" + [[${obj.user}]] + "']").prop("checked", "checked");
	$("input[name='hobby'][value='" + [[${obj.hobby}]] + "']").prop("checked", "checked");
	$("select[name='major'] option[value='" + [[${obj.major}]] + "']"").prop("selected", "selected");
</script>

方案3：th:field

th:field默认可以基于值，选中默认值。需要注意的是，th:field需要搭配th:object使用。文章来源地址https://www.toymoban.com/news/detail-620556.html

<form th:object="${obj}">
	输入框：<input type="text" name="user" th:field="*{user}"/><br>
	单选框：<input type="radio" name="sex" value="1" th:field="*{sex}"/>男
	       <input type="radio" name="sex" value="0" th:field="*{sex}"/>女<br>
	复选框：<input type="checkbox" name="hobby" value="1" th:field="*{hobby}"/>运动
	       <input type="checkbox" name="hobby" value="2" th:field="*{hobby}"/>学习
	       <input type="checkbox" name="hobby" value="3" th:field="*{hobby}"/>听音乐
	       <input type="checkbox" name="hobby" value="4" th:field="*{hobby}"/>旅游<br>
	下拉框：<select name="major" th:field="*{major}">
	            <option value="1">选项1</option>
	            <option value="2">选项2</option>
	            <option value="3">选项3</option>
	        </select>
</form>