点击弹窗数据回显并实现修改
点击修改按钮,在弹窗中回显数据,并实现修改的操作如图:操作按钮的html,第二个标签是操作按钮:<td><a class='mr-4 vue'><span class='fa fa-eye' aria-hidden='true'></span></a><a class='mr-4 updated' onclick="updated(
·
点击修改按钮,在弹窗中回显数据,并实现修改的操作
如图:
操作按钮的html,第二个标签是操作按钮:
<td>
<a class='mr-4 vue'>
<span class='fa fa-eye' aria-hidden='true'></span>
</a>
<a class='mr-4 updated' onclick="updated(${exlist.exId})">
<span class='fas fa-pencil-alt'></span>
</a>
<a class='mr-4 delet' onclick="delet(${exlist.exId})">
<span class='fas fa-trash-alt'></span>
</a>
</td>
弹窗的html:
<div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="modal-title-edit-row" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title-edit-row">修改信息</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="basic-form">
<form method="post" id="updatedExForm">
<!-- 第一行 -->
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<div class="form-input text-center">
<img src="" id="thumbnailupdated" height="170" width="180" onerror="this.src='../picture/previewFile.png';this.onerror=null;" />
</div>
</div>
</div>
<%-- 第一行第2列 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">展品名称</label>
<input type="text" class="form-control" name="exName" id="exNameupdated" >
</div>
<div class="form-group">
<label class="form-label">展品次序</label>
<input type="text" class="form-control" name="sortOrder" id="sortOrderupdated" placeholder="展品次序">
</div>
</div>
<%-- 第一行第3列 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">展品状态</label>
<select class="form-control form-select" name="exStatus" id="exStatusupdated">
<option selected>展品状态</option>
<option value="1">展出</option>
<option value="0">禁用</option>
</select>
</div>
<div class="form-group">
<label class="form-label">展品类型1(子类型)</label>
<select class="form-control form-select" name="cId1" id="cId1updated" >
<option selected>展品类型1(子类型)</option>
<c:forEach items="${category3}" var="category3">
<option value="${category3.cId}">${category3.cName}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="row">
<%-- 第二行第1列 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">展品类型2(子类型)</label>
<select class="form-control form-select" name="cId2" id="cId2updated">
<option selected>展品类型2(子类型)</option>
<c:forEach items="${category3}" var="category3">
<option value="${category3.cId}">${category3.cName}</option>
</c:forEach>
</select>
</div>
</div>
<%-- 第二行第2列 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">展品类型3(子类型)</label>
<select class="form-control form-select" name="cId3" id="cId3updated">
<option selected>展品类型3(子类型)</option>
<c:forEach items="${category3}" var="category3">
<option value="${category3.cId}">${category3.cName}</option>
</c:forEach>
</select>
</div>
</div>
<%-- 第二行第3列 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">展品文件属性</label>
<select class="form-control form-select" name="typee" id="typeeupdated">
<option selected>展品文件属性（请根据上传文件选择）</option>
<option value="3D">3D文件</option>
<option value="图片">图片</option>
<option value="音频">音频</option>
</select>
</div>
</div>
</div>
<!-- 第三行 -->
<div class="row">
<%-- 31 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">文件尺寸</label>
<input type="text" class="form-control" name="exSize" id="exSizeUpdated" placeholder="文件尺寸">
</div>
</div>
<%-- 32 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">作者</label>
<div class="col-lg-12">
<input type="text" class="form-control" placeholder="作者" name="author" id="authorupdated">
</div>
</div>
</div>
<%-- 33 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">作者性别</label>
<div class="col-lg-12">
<select class="form-control form-select" name="authorSex" id="authorSexupdated">
<option selected>作者性别</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
</div>
</div>
<!-- 第四行 -->
<div class="row">
<%-- 41 --%>
<div class="col-xl-4">
<div class="form-group">
<label class="form-label">特点</label>
<input type="text" class="form-control" name="exPoint" id="exPointupdated" placeholder="特点" >
</div>
</div>
<%-- 42 --%>
<div class="col-xl-8">
<div class="form-group">
<label class="form-label">展品年代</label>
<input type="text" class="form-control" name="period" id="periodudated" placeholder="展品年代">
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<label class="form-label">详细信息</label>
<textarea class="form-control" name="exDesc" id="exDescupdated" placeholder="详细信息" rows="4"></textarea>
</div>
</div>
</div>
<input type="text" name="exId" id="exIdupdated" hidden />
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updatedex()">Save changes</button>
</div>
</div>
</div>
</div>
对应的数据会显的js:
function updated(eid){
$.ajax({
url:'/exhibition/echo/'+eid,
type:"get",
dataType:"json",
success:function (data){
//将后台传回的数据进行注入
document.getElementById('thumbnailupdated').src="http://localhost:8080/exhibition/"+data.fileName;
$("#exNameupdated").val(data.exName);
$("#sortOrderupdated").val(data.sortOrder);
$("#exStatusupdated").val(data.exStatus);
$("#cId1updated").val(data.cId1);
$("#cId2updated").val(data.cId2);
$("#cId3updated").val(data.cId3);
$("#typeeupdated").val(data.typee);
$("#exSizeUpdated").val(data.exSize);
$("#authorupdated").val(data.author);
$("#authorSexupdated").val(data.authorSex);
$("#exPointupdated").val(data.exPoint);
$("#periodudated").val(data.period);
$("#exDescupdated").val(data.exDesc);
$("#exIdupdated").val(data.exId);
//弹出窗口
$('#modal-edit').modal('show');
},
error:function (){
alert("服务器正忙，请稍后再试...");
}
})
}
数据回显的controller:
@RequestMapping(value = "'/exhibition/echo/{eid}" , method=RequestMethod.GET)
@ResponseBody
public ExhibitionAllATT exhibitionEcho(@PathVariable("eid")Integer eid ){
ExhibitionAllATT eaa = exhibitionService.exhibitionEcho(eid);
return eaa;
}
数据回显的service,因为同时对两个表进行了操作,所以在service层将查询出来的数据分别set进两个POJO中:
@Override
public ExhibitionAllATT exhibitionEcho(Integer eid) {
ExhibitionAllATT eaa = new ExhibitionAllATT();
Exhibition e = exhibitionMapper.selectByPrimaryKey(eid);
System.out.println(e);
eaa.setExId(eid);
eaa.setExName(e.getExName());
eaa.setExStatus(e.getExStatus());
eaa.setcId1(e.getcId1());
eaa.setcId2(e.getcId2());
eaa.setcId3(e.getcId3());
eaa.setSortOrder(e.getSortOrder());
eaa.setTypee(e.getTypee());
eaa.setExSize(e.getExSize());
eaa.setFileName(e.getFileName());
eaa.setFileAddress(e.getFileAddress());
ExDesc ed = exDescMapper.selectByPrimaryKey(eid);
eaa.setExDesc(ed.getExDesc());
eaa.setPeriod(ed.getPeriod());
eaa.setExPoint(ed.getExPoint());
eaa.setAuthor(ed.getAuthor());
eaa.setAuthorSex(ed.getAuthorSex());
return eaa;
}
在弹窗中对数据进行修改后,点击save changes进行保存.
改的js:
function updatedex(){
$.ajax({
url: '/exhibition/updatedex',
type: 'post',
//对表单数据进行了序列化
data:$("#updatedExForm").serialize(),
success:function (data){
if (data.errorCode == "100"){
alert("更新成功");
}else{
alert("上传失败");
}
},
error: function (){
alert("服务器正忙，请稍后再试...");
}
});
}
改的controller
@RequestMapping(value = "/exhibiton/updatedex" ,method = RequestMethod.POST)
@ResponseBody
public ResponseMessage exhibitionUpdated(ExhibitionAllATT exhibitionAllATT){
System.out.println("到后台啦");
ResponseMessage responseMessage = exhibitionService.updatedEx(exhibitionAllATT);
return responseMessage;
}
改的service,因为是同时对两个表进行了修改,所以这里分别对两个POJO进行了操作.有点麻烦.
@Override
public ResponseMessage updatedEx(ExhibitionAllATT exhibitionAllATT) {
System.out.println("?");
Exhibition e = new Exhibition();
e.setExId(exhibitionAllATT.getExId());
e.setExName(exhibitionAllATT.getExName());
e.setExStatus(exhibitionAllATT.getExStatus());
e.setcId1(exhibitionAllATT.getcId1());
e.setcId2(exhibitionAllATT.getcId2());
e.setcId3(exhibitionAllATT.getcId3());
e.setSortOrder(exhibitionAllATT.getSortOrder());
e.setTypee(exhibitionAllATT.getTypee());
e.setExSize(exhibitionAllATT.getExSize());
e.setUpdated(new Date());
exhibitionMapper.updateByPrimaryKeySelective(e);
ExDesc ed = new ExDesc();
ed.setExId(exhibitionAllATT.getExId());
ed.setExDesc(exhibitionAllATT.getExDesc());
ed.setExPoint(exhibitionAllATT.getExPoint());
ed.setPeriod(exhibitionAllATT.getPeriod());
ed.setAuthor(exhibitionAllATT.getAuthor());
ed.setAuthorSex(exhibitionAllATT.getAuthorSex());
ed.setUpdated(new Date());
exDescMapper.updateByPrimaryKeySelective(ed);
return ResponseMessage.success();
}
mybatis用的是逆向工程自动生成的.
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)