# 实现修改页面数据回显的操作<hr>
## 1.导入jquery.easyui.min.js包
## 2.写一个更新触发按钮(这里以模态框为例)
<button class="btn btn-primary btn-lg" data-toggle="modal" οnclick="getStudentinfo('+id+')" data-target="#myModal">修改</button>
## 3.触发事件的方法(根据传进来的id值进行判断)
<script type="text/javascript">
function getStudentinfo(stuid){
console.log(id);
$.ajax({
//这里是我根据id查询获得对象的controller路径
url:'http://localhost:8086/ee/student/'+stuid,
type:'GET',
contentType:'application/json;charset=UTF-8',
async:true,
success:function(data){
//stuInfo是模态框表中的id值(详情可看第四个步骤)
$('#stuInfo').form('load',{
//id是模态框中的<input name="id">. data.id是指传进来的id值。同下
id:data.id||'',
name:data.name||'',
age:data.age||'',
sex:data.sex||'',
student_class:data.student_class||'',
grade:data.grade||'',
profession:data.profession||'',
});
},
error:function(data){
alert("错误");
}
})
}
</script>
## 4.模态框中修改的页面:
<div class="modal fade" id="myModal" 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>
//这里的id是指更新方法中的id
<div class="modal-body" id="stuInfo">
<form class="form-horizontal" id="ajaxForm" οnsubmit="return false;">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">学号</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="id" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="name" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="age" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">性别</label>
<div class="col-sm-4">
男:<input type="radio" name="sex" value="男"/>
女:<input type="radio" name="sex" value="女"/>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">年级</label>
<div class="col-sm-4">
<select class="form-control" name="grade">
<option>2015级</option>
<option>2016级</option>
<option>2017级</option>
<option>2018级</option>
<option>2019级</option>
</select>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">班级</label>
<div class="col-sm-4">
<select class="form-control" name="student_class">
<option>21411</option>
<option>21412</option>
<option>21413</option>
</select>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">专业</label>
<div class="col-sm-4">
<select class="form-control" name="profession">
<option>通信工程</option>
<option>物联网工程</option>
<option>计算机科学与技术</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" onClick="update()">更新学生列表</button>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
## 5.注意事项
- 我在研究下拉框如何回显数据的时候,以为要有input和select相结合,才能够让数据回显在input框,然后再通过再select下拉框选择数据,但是会发现出现两个框。<br>
- B 只要有select框就行。<br>
- C 当数据回显时,你会发现传进来的为空。这可能是因为你数据库写的数据与你下拉框的值不符,所以你重新更新数据库的数据就好了。。<br>
比如,我们通常为了测试方便,就在专业一栏填2或者数字,但是你后来设的下拉框中并没有数字,所以它就会匹配不到你下拉框的数据,你可以将专业一栏的值变成跟下拉框一样,就能实现这种效果拉。
## 1.导入jquery.easyui.min.js包
## 2.写一个更新触发按钮(这里以模态框为例)
<button class="btn btn-primary btn-lg" data-toggle="modal" οnclick="getStudentinfo('+id+')" data-target="#myModal">修改</button>
## 3.触发事件的方法(根据传进来的id值进行判断)
<script type="text/javascript">
function getStudentinfo(stuid){
console.log(id);
$.ajax({
//这里是我根据id查询获得对象的controller路径
url:'http://localhost:8086/ee/student/'+stuid,
type:'GET',
contentType:'application/json;charset=UTF-8',
async:true,
success:function(data){
//stuInfo是模态框表中的id值(详情可看第四个步骤)
$('#stuInfo').form('load',{
//id是模态框中的<input name="id">. data.id是指传进来的id值。同下
id:data.id||'',
name:data.name||'',
age:data.age||'',
sex:data.sex||'',
student_class:data.student_class||'',
grade:data.grade||'',
profession:data.profession||'',
});
},
error:function(data){
alert("错误");
}
})
}
</script>
## 4.模态框中修改的页面:
<div class="modal fade" id="myModal" 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>
//这里的id是指更新方法中的id
<div class="modal-body" id="stuInfo">
<form class="form-horizontal" id="ajaxForm" οnsubmit="return false;">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">学号</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="id" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="name" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="age" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">性别</label>
<div class="col-sm-4">
男:<input type="radio" name="sex" value="男"/>
女:<input type="radio" name="sex" value="女"/>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">年级</label>
<div class="col-sm-4">
<select class="form-control" name="grade">
<option>2015级</option>
<option>2016级</option>
<option>2017级</option>
<option>2018级</option>
<option>2019级</option>
</select>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">班级</label>
<div class="col-sm-4">
<select class="form-control" name="student_class">
<option>21411</option>
<option>21412</option>
<option>21413</option>
</select>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">专业</label>
<div class="col-sm-4">
<select class="form-control" name="profession">
<option>通信工程</option>
<option>物联网工程</option>
<option>计算机科学与技术</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" onClick="update()">更新学生列表</button>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
## 5.注意事项
- 我在研究下拉框如何回显数据的时候,以为要有input和select相结合,才能够让数据回显在input框,然后再通过再select下拉框选择数据,但是会发现出现两个框。<br>
- B 只要有select框就行。<br>
- C 当数据回显时,你会发现传进来的为空。这可能是因为你数据库写的数据与你下拉框的值不符,所以你重新更新数据库的数据就好了。。<br>
比如,我们通常为了测试方便,就在专业一栏填2或者数字,但是你后来设的下拉框中并没有数字,所以它就会匹配不到你下拉框的数据,你可以将专业一栏的值变成跟下拉框一样,就能实现这种效果拉。