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">×
</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
);
}
}
})
}```
