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

这篇具有很好参考价值的文章主要介绍了【技术】浅谈 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>

到了这里,关于【技术】浅谈 Thymeleaf 中 th:field 的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Spring Boot】Thymeleaf模板引擎 — 表达式的语法

    模板的主要作用是将后台返回的数据渲染到HTML中。那么Thymeleaf是如何解析后台数据的呢?接下来从变量、方法、条件判断、循环、运算(逻辑运算、布尔运算、比较运算、条件运算)方面学习Thymeleaf表达式支持的语法。 (1)文本赋值 赋值就是通过${}标签将后台返回的数据替

    2024年02月14日
    浏览(38)
  • Spring Boot 中的 @Field 注解详解

    Spring Boot 是目前 Java 生态圈中最受欢迎的 Web 应用开发框架之一,它提供了很多优秀的功能和工具,可以帮助开发者快速构建高效、可靠的 Web 应用程序。其中一个重要的功能就是数据绑定和验证,Spring Boot 提供了多种方式来绑定请求参数、表单数据、JSON 数据等。其中,@Fi

    2024年02月11日
    浏览(33)
  • Spring Boot中使用thymeleaf以及各种取值,判断,选择,截取等方式

    Spring Boot支持FreeMarker、Groovy、Thymeleaf和Mustache四种模板解析引擎,官方推荐使用Thymeleaf。 spring-boot-starter-thymeleaf 在Spring Boot中使用Thymeleaf只需在pom中加入Thymeleaf的starter即可: 在Spring Boot 1.5.9.RELEASE版本中,默认的Thymeleaf版本为2.1.6.RELEASE版本,这里推荐使用3.0以上版本。在pom中

    2024年02月10日
    浏览(39)
  • 浅谈Spring Cloud与Spring Boot概念与关系

    Spring boot简化了基于Spring的应用开发,通过少量的代码就能创建一个独立的,产品级别的Spring应用。Spring Boot为Spring平台及第三方库提供开箱即用的设置,这样你就可以有条不紊的开始,多数Spring应用只需要很少的Spring配置。 Spring boot简化了基于Spring的应用开发,通过少量的代

    2024年02月11日
    浏览(34)
  • 【Spring Boot+Thymeleaf+MyBatis+mysql】实现电子商务平台实战(附源码)持续更新~~ 包括sql语句、java、html代码

    源码请点赞关注收藏后评论区留言和私信博主 开发环境:Web服务器使用Servlet容器,数据库采用mysql,集成开发环境为Spring Tool Suite(STS) 电子商务平台分为两个子系统 一个是后台管理系统 一个是电子商务系统,下面分别讲解着两个子系统的功能需要与模块划分 1:后台管理子

    2024年02月09日
    浏览(43)
  • spring boot3参数校验基本用法

    ⛰️个人主页:      蒾酒 🔥系列专栏: 《spring boot实战》 🌊山高路远,行路漫漫,终有归途。 目录 前置条件 前言 导入依赖 使用介绍 配置检验规则 开启校验 使用注意 全局异常捕获返回友好提示信息 常用的校验规则注解 使用技巧 已经初始化好一个spring boot项目且版本为

    2024年02月21日
    浏览(44)
  • Spring Boot 中的 @Controller 注解:原理、用法与示例

    Spring Boot 是一个快速开发 Spring 应用程序的框架,它提供了很多有用的功能和特性。其中,@Controller 注解是一个常用的注解,它可以将一个 Java 类标记为 Spring MVC 中的控制器。本文将介绍 Spring Boot 中 @Controller 注解的原理、用法和示例。 在 Spring MVC 中,@Controller 注解用于标识

    2024年02月07日
    浏览(51)
  • Spring Boot 中 WebSocket 的用法和配置方法

    作者:禅与计算机程序设计艺术 Web Socket 是 HTML5 提出的协议,它允许在服务器与浏览器之间建立全双工通信信道,并提供实时数据传输能力。Spring Framework 5 引入了对 WebSocket 的支持,使得开发人员可以轻松地实现基于 WebSocket 的服务端功能。WebSocket 有助于实现浏览器客户端和

    2024年02月08日
    浏览(30)
  • Spring Boot 容器扩展BeanFactoryPostProcessor、BeanPostProcessor、 BeanDefinitionRegistryPostProcessor用法和解析

    之所以在企业级应用中Spring 到Spring Boot 一直立于不败之地,保持火热,其中很关键的一个点是,它的扩展简直太强大了,上一篇,我们聊了一下 Spring Boot整个生命周期中的扩展点,,比如 SpringApplicationRunListener 可以监听应用的各个阶段。本文我们聊聊,Spring 容器上的扩展。

    2024年02月11日
    浏览(41)
  • 浅谈3D隐式表示(SDF,Occupancy field,NeRF)

    本篇文章介绍了符号距离函数Signed Distance Funciton(SDF),占用场Occupancy Field,神经辐射场Neural Radiance Field(NeRF)的概念、联系与区别。 三维空间的表示形式可以分为显式和隐式。 比较常用的显式表示比如 体素Voxel , 点云Point Cloud , 三角面片Mesh 等。 比较常用的隐式表示有 符

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包