前面已经写了 批量导入,图片显示,现在写的是批量修改,后面会写用echarts+springboot 做折线图,有时间贴上
1、jsp代码如下,编辑按钮
formatter: function (value, row, index) {
var edit = '<input class="btn btn-primary" type="button" value="编辑" οnclick="edit(\'' + row.noticeid + '\')" />';
return edit;
}
2、创建编辑模态框
<!--编辑操作模态框-->
<div class="modal fade" id="my1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabe1">新闻编辑</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="" method="post">
<div class="item">
<h3>新闻编辑</h3>
</div>
<div class="item">
<input type="hidden" name="noticeid" id="noticeid1">
新闻标题:
<input type="text" class="form-control" name="title" id="title1"
placeholder="请输入标题"/><span
class="state1"></span></div>
<div class="item">
新闻内容:
<textarea class="form-control" name="content" id="content1" rows="3">新闻内容</textarea>
<span
class="state1"></span></div>
<div class="form-group">
<label class="col-sm-2 control-label">新闻图片</label>
<div class="col-sm-10">
<img src="" id="imagepath1" name="imagepath" style="width: 120px;height: 80px"><input type="file" name="imagepath" data-ref="url2"
class="col-sm-10 myfile" value=""/> <input type="hidden"
name="url2" id="imagepath1" value="">
</div>
</div>
<div class="item">
<button type="button" id="editBtn1" class="btn btn-primary" data-dismiss="modal"><span
class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span
class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
</button>
</div>
</form>
</div>
</div>
</div>
</div>
3、点击编辑:需要选择一行数据,获取当前行的所有数据并就进行回显
这主要注意给图片赋值这:是attr 不在是val了
$("#imagepath1").attr(“src”,row.imagepath);
//编辑操作
function edit(id) {
var vals = [];
$('input:checkbox:checked').each(function (index, item) {
vals.push($(this).val());
}
);
if(vals.length<1||vals.length>=2) {
$("#editButton").removeAttr("data-target");
alert("请选择一条数据");
} else {
//打开修改模态框
$('#my1').modal();
var rows = $('#noticeTable').bootstrapTable('getSelections');
var row = rows[0];
$("#noticeid1").val(row.noticeid);
$("#title1").val(row.title);
$("#content1").val(row.content);
//显示图片操作
$("#imagepath1").attr("src",row.imagepath);
// var a = $("#imagepath1").val(row.imagepath);
}
}
4、点击编辑效果如下
点击选择,重新选择一个图片 在点击上传就替换掉原来的图片并返回一个图片名称,点击保存后台获取前台的所有数据,包括图片名称更新到数据库,完毕了,下面把其他代码贴上
5、点击操作操作的js
//编辑新闻
$('#editBtn1').click(function () {
var title = $("#title1").val();
var content = $("#content1").val();
var imagepath = $("#imagepath1").val();
var noticeid = $("#noticeid1").val();
$.ajax({
type: "post",
datatype: "json",
url: "/noticeManager/notice/save",
data:{"title":title,"content":content,"imagepath":imagepath,"noticeid":noticeid},
async: true,
success: function (result) {
if (result.flag == 'success') {
//刷新当前table
$("#noticeTable").bootstrapTable('refresh');
toastr.success("修改成功!");
} else {
toastr.error("修改失败!");
}
}
});
});
6、后台就不写了,就一个更新的操作
各位大哥觉得好的给点个赞