Thymeleaf （select、checkbox)数据绑定和数据回回显

最新推荐文章于 2025-06-30 12:25:16 发布

原创最新推荐文章于 2025-06-30 12:25:16 发布 · 9.3k 阅读

9 ·

CC 4.0 BY-SA版权

Thymeleaf 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Thymeleaf在Web应用中如何进行数据绑定和回显，包括select下拉框和checkbox的选择项填充及状态保持，适用于前端与后端开发人员学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种情况：select 数据绑定：

前端页面：

<div class="col-sm-10">
					<select name="type"  id="type" class="form-control">
						<option value=''>请数据类型</option>
    					<option th:each="map : ${dataType}" th:text="${map.key}" th:value="${map.value}">
    					</option>
					</select>
				</div>

后台代码：

	// 跳转至新增页面
	@RequestMapping(value = "/insertPage", method = { RequestMethod.GET })
	public String insertPage(Model model) {
		Map<String, Object> map = MySQLConstant.getMySQLDataType();
		model.addAttribute("dataType", map);
		return "field/add";
	}

第二情况：select 数据回显：

前端页面：

<div class="form-group">
				<label for="type" class="col-sm-2 control-label">数据类型</label>
				<div class="col-sm-10">
					<select name="type"  id="type" class="form-control" th:field="*{type}">
						<option th:each="map:${dataType}" th:text="${map.key}" th:value="${map.value}" th:selected="${type eq map.value}">
    					</option>
					</select>
				</div>
			</div>

后台代码：

// 跳转至更新页面
	@RequestMapping(value = "/updatePage")
	public String update(Model model, String sid) {
		Column entity = service.selectByPrimaryKey(sid);
		model.addAttribute("entity", entity);
		Map<String, Object> map = MySQLConstant.getMySQLDataType();
		model.addAttribute("dataType", map);

		Map<String, Object> requiredMap = new HashMap<String, Object>();
		requiredMap.put("否", "2");
		requiredMap.put("是", "1");
		model.addAttribute("requiredMap", requiredMap);

		Map<String, Object> primaryMap = new HashMap<String, Object>();
		primaryMap.put("否", "2");
		primaryMap.put("是", "1");
		model.addAttribute("primaryMap", primaryMap);
		return "field/update";
	}

第三种情况：checkbox 数据绑定

前端页面：

<div class="form-group">
				<label for="required" class="col-sm-2 control-label">是否必填</label>
				<div class="col-sm-10">
					<!--  
					<input type="text" class="form-control" name="required"
						id="required" placeholder="在此输入控件名称" />-->
					<div class="form-control">
	   					<label class="checkbox-inline">
	      					<input type="checkbox" id="required" name="required" value="1"> 是
	   					</label>
	   					<label class="checkbox-inline">
	      					<input type="checkbox" id="required" name="required" value="2"> 否
	  					</label>
					</div>
				</div>
			</div>

第四种情况：checkbox 数据回显

前端页面：

<div class="form-group">
				<label for="required" class="col-sm-2 control-label">是否必填</label>
				<div class="col-sm-10">
					<div class="form-control">
					<input type ="checkbox" name="required" th:field="*{required}"
						th:each ="map : ${requiredMap}"
						th:value="${map.value}"
						th:text ="${map.key}"
						th:attr ="checked=${map.value eq required ? true : false}">
					</div>
				</div>
			</div>

后台代码：

@RequestMapping(value = "/updatePage")
	public String update(Model model, String sid) {
		Column entity = service.selectByPrimaryKey(sid);
		model.addAttribute("entity", entity);
		Map<String, Object> map = MySQLConstant.getMySQLDataType();
		model.addAttribute("dataType", map);

		Map<String, Object> requiredMap = new HashMap<String, Object>();
		requiredMap.put("否", "2");
		requiredMap.put("是", "1");
		model.addAttribute("requiredMap", requiredMap);

		Map<String, Object> primaryMap = new HashMap<String, Object>();
		primaryMap.put("否", "2");
		primaryMap.put("是", "1");
		model.addAttribute("primaryMap", primaryMap);
		return "field/update";
	}