【技术】浅谈 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使用。

<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>