前面已经写了 批量导入，图片显示，现在写的是批量修改，后面会写用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
);
}
}
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') {
$
("#noticeTable").bootstrapTable('refresh');
toastr
.success("修改成功!");
} else {
toastr
.error("修改失败!");
}
}
});
});
6、后台就不写了，就一个更新的操作
各位大哥觉得好的给点个赞
