thymeleaf对于HTML页面中关于文本框、下拉框、单选按钮赋值处理

最新推荐文章于 2023-05-25 23:00:30 发布

原创最新推荐文章于 2023-05-25 23:00:30 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

该篇博客展示了如何在EmployeeController中使用RESTful风格的方法`toUpdate`来更新员工信息。通过`@PathVariable`接收ID，从DAO层获取Department和Employee对象，设置部门关系并传递到前端`update.html`页面。在前端页面，使用Thymeleaf模板引擎展示表单，包括文本框、单选按钮、下拉框和日期输入，允许用户编辑并提交员工的详细信息。

记个笔记

EmployeeConotroller.java

    /**
     * 使用RestFul风格
     * @param id
     * @param model
     * @return
     */
    @RequestMapping("/toUpdate/{id}")
    public String toUpdate(@PathVariable("id") Integer id, Model model) {
        Department departments = departmentDao.getDepartmentsById(id);
        System.out.println(employeeDao.getEmployeeById(id)+"======>");
        Employee employee = employeeDao.getEmployeeById(id);
        employee.setDepartment(departments);
        model.addAttribute("emp",employee);
        Collection<Department> department = departmentDao.getDepartment();
        model.addAttribute("department",department);
        return "emp/update";
    }

update.html

	<body>
	<!--这里的侧边栏和头部都是获取的公共组件-->
		 <div th:replace="~{commons/commons::navbar}"></div>
		<div class="container-fluid">
			<div class="row"> 
				<!--侧边栏-->
				<div th:replace="~{commons/commons::sidebar}"></div>
				<!--主内容-->
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2>员工添加</h2>
					<form method="post" action="/add">
						<div class="form-group">
							<label>用户名：</label>
							<!--文本框的赋值-->
							<input type="text" class="form-control" placeholder="lastName" name="lastName" th:value="${emp.getLastName()}">
						</div>
						<div class="form-group">
							<label for="exampleInputEmail1">邮箱地址</label>
							<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email" th:value="${emp.getEmail()}">
						</div>
						<!--单选按钮的赋值-->
						<div class="form-group" th:value="${emp.getGender()}">
							<label class="radio-inline">
								<input type="radio" name="gender" id="inlineRadio1" th:checked="${emp.getGender()==1}"> 男
							</label>
							<label class="radio-inline">
								<input type="radio" name="gender" id="inlineRadio2"  th:checked="${emp.getGender()==0}"> 女
							</label>
						</div>
						<!--下拉框的取值赋值-->
						<div class="form-group">
							<select class="form-control" name="department.id">
								<option th:each="dept:${department}" th:value="${dept.getId()}"
										th:selected="${dept.getId()==emp.getDepartment().getId()}">[[${dept.getDepartmentName()}]]</option>
							</select>
						</div>
						<!--对于日期格式的处理-->
						<div class="form-group">
							<label>生日：</label>
							<input type="text" class="form-control" placeholder="birth" name="birth" th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}">
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
				</main>
			</div>
		</div>
 
	</body>