后台代码,注意返回值类型是单个结果集,不是集合,如果返回了集合需要遍历否则前台无法解析集合只能解析json
@RequestMapping("getPersonById")
public void getPersonById(Integer person_id, HttpServletResponse response, Model model) throws IOException {
Persondesc alarmTask1=personService.getPersonById(person_id);
model.addAttribute("alarmTask",alarmTask1);
String alarmTask = JSON.toJSONString(alarmTask1);
response.getWriter().write(alarmTask);
}
前台展示代码
<div class="modal fade" id="queryInfo" 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>
<form action="${pageContext.request.contextPath }/productServlet?type=info"
method="post">
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">description</span>
<input type="text" class="form-control" placeholder="description"
id="description" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">skill</span>
<input type="text" class="form-control" placeholder="skill"
id="skill" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">education</span>
<input type="text" class="form-control" placeholder="education"
id="education" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">学校</span>
<input type="text" class="form-control" placeholder="学校"
id="school" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">地址</span>
<input type="text" class="form-control" placeholder="地址"
id="address" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">工作年份</span>
<input type="text" class="form-control" placeholder="工作年份"
id="yearOfWork" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">头像</span>
<img src="" width='170px' height='100px' id="img">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">照片</span>
<img src="" width='170px' height='100px' id="images">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">期望薪资</span>
<input type="text" class="form-control" placeholder="期望薪资"
id="money" readonly="readonly">
</div>
<br />
<div class="input-group">
<span class="input-group-addon">wantCity</span>
<input type="text" class="form-control" placeholder="wantCity"
id="wantCity" readonly="readonly">
</div>
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭</button>
<!-- <button type="submit" class="btn btn-primary">提交</button> -->
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
前台按钮触发以及ajax请求,获取选中行ID的实现方法感觉不是很好,如果有更好的方法欢迎指教
$("#btn_xq").click(function () {
var getSelections = $('#table_user').bootstrapTable('getSelections');
if (getSelections && getSelections.length == 1) {
var a =Object.values(getSelections[0])
var b
getSelections.forEach(function (a) {
b=a.person_id
});
$.ajax({
async : true,
cache : false,
url : "getPersonById.htm?person_id="+b,
// type : "POST",
// 成功后开启模态框
success:function(data){
//将数据回显到弹窗
$("#description").val(data.description);
$("#skill").val(data.skill);
$("#id").val(data.person_id);
$("#skill").val(data.skill);
$("#education").val(data.education);
$("#school").val(data.school);
$("#address").val(data.address);
$("#yearOfWork").val(data.yearOfWork);
$('#img').attr("src",data.img);
$('#images').attr("src",data.images);
$("#money").val(data.money);
$("#wantCity").val(data.wantCity);
// $('#queryInfo').modal({backdrop: 'static', keyboard: false}),
$('#queryInfo').modal('show');
},
error : function() {
alert("请求失败");
},
dataType : "json"
});
} else {
$("#select_message").text("请选择其中一条数据");
$("#alertmod_table_user_mod").show();
}
});