【技术】浅谈 Thymeleaf 中 th:field 的用法

浅谈 Thymeleaf 中 th:field 的用法

写在前面

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

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

方案1：th:if

最直观的写法使用

th:if

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

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

方案2：JS 脚本

基于 JS 脚本填充数据。注意：

<script th:inline="javascript" >

<form>
    输入框：<inputtype="text"name="user"/><br>
    单选框：<inputtype="radio"name="sex"value="1"/>男
           <inputtype="radio"name="sex"value="0"/>女<br>
    复选框：<inputtype="checkbox"name="hobby"value="1"/>运动
           <inputtype="checkbox"name="hobby"value="2"/>学习
           <inputtype="checkbox"name="hobby"value="3"/>听音乐
           <inputtype="checkbox"name="hobby"value="4"/>旅游<br>
    下拉框：<selectname="major"><optionvalue="1">选项1</option><optionvalue="2">选项2</option><optionvalue="3">选项3</option></select></form><scriptth: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

使用。

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