springboot集成thymeleaf页面回显

最新推荐文章于 2022-12-27 02:48:54 发布

牧码峰

最新推荐文章于 2022-12-27 02:48:54 发布

阅读量1k

点赞数 1

分类专栏： html 文章标签： java html

本文链接：https://blog.csdn.net/syf_jajer/article/details/109190420

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

springboot集成thymeleaf页面回显数据

页面采用模态框的下拉框的模式
获取数据应用ajax回显到前端的页面

前端代码

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">添加排班信息</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" role="form" id="add_schdule_form">

					<div class="form-group">
						<label class="col-sm-3 control-label">选择诊室</label>
						<div class="col-sm-9">
							<select class="form-control" name="roomId">
								<option th:each="item:${roomList}" th:text="${item.name}"
									th:selected="'a' eq ${item.name}" th:value="${item.roomId}">
								</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">选择排班医生</label>
						<div class="col-sm-9">
							<select class="form-control" name="doctorId">
								<option th:each="item:${doctorList}" th:text="${item.name}"
									th:selected="'a' eq ${item.name}" th:value="${item.doctorId}">
								</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">排班日期</label>
						<div class="col-sm-9">
							<input class="form-control has-success" type="date" placeholder="请输入医生姓名" name="date">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">剩余预约的数量</label>
						<div class="col-sm-9">
							<input class="form-control has-success" type="text" placeholder="请输入剩余预约数量"
								name="remainCount">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="addschdule()">保存
				</button>
			</div>
		</div>
	</div>
</div>

ajax从后端获取数据，从后端查出来的数据和前端遍历下拉框中的数据重复的话被选中，然后显示到前端的页面

前端Ajax

function updateShdule(scheduleId) {
        $.ajax({
            url: "/admin/updateShdule/?scheduleId=" + scheduleId,
            type: "post",
            dataType:"json",
            success: function (data) {
                if(data.result){
                //给前端的页面赋值
                    $("#date1").val(data.schedule.date)
                    $("#sid").val(data.schedule.scheduleId)
                    //获取前端的信息
                    var select = document.getElementById("doctorId");
                    var select1 = document.getElementById("roomId");
                    //遍历后端的数据
                    $.each(data.schedule,function (index,schedule) {
                    //遍历前端的下拉框
                        for (var i = 0; i < select.options.length; i++) {
                          if(index=="doctor"){
                              if (select.options[i].value == schedule.doctorId) {
                                  alert(schedule.doctorId)
                                  select.options[i].selected = "selected";
                              }
                          }
                        }
                        for (var i = 0; i < select1.options.length; i++) {
                            if(index=="room"){
                                if (select1.options[i].value == schedule.roomId) {
                                    select1.options[i].selected = "selected";
                                }
                            }
                        }
                    })
                    //给页面赋值
                    $("#test1").html(select);
                    $("#test2").html(select1);
                }
            }
        })
    }```