1.jsp代码
<%--引入bootstrap的样式--%>
<link rel="stylesheet" href="statics/boot/css/bootstrap.min.css">
<%--引入bootstrap和jqgrid的整合样式--%>
<link rel="stylesheet" href="statics/jqgrid/css/trirand/ui.jqgrid-bootstrap.css">
<%--引入js文件--%>
<script src="statics/boot/js/jquery-2.2.1.min.js"></script>
<%--引入bootstrap的js文件--%>
<script src="statics/boot/js/bootstrap.min.js"></script>
<%--引入jqgrid的js文件--%>
<script src="statics/jqgrid/js/trirand/jquery.jqGrid.min.js"></script>
<script src="statics/jqgrid/js/trirand/i18n/grid.locale-cn.js"></script>
<script src="statics/jqgrid/js/ajaxfileupload.js"></script>
<script type="text/javascript">
$(function () {
$('#table').jqGrid({
// 整合使用bootstrap样式的属性
styleUI: 'Bootstrap',
url: '${pageContext.request.contextPath}/banner/selectByPage',
datatype: 'json',
colNames: ['名称', '图片', '描述', '创建日期', '状态'],
// 开启表格编辑模式
cellEdit: true,
// 指定表单编辑时提交的路径
editurl: '${pageContext.request.contextPath}/banner/operBanner',
colModel: [
//传入后台的数据
{name: 'title', align: 'center', editable: true},
{
name: 'cover', align: 'center', editable: true,
edittype: 'file',
formatter: function (value, options, row) {
return '<img style="height: 50px;" src="${pageContext.request.contextPath}/' + 'files/' + row.cover + '"/>';
}
},
{name: 'description', align: 'center', editable: true},
{
name: 'createDate',
index: 'operateTime',
formatter: "date",
formatoptions: {newformat: 'Y-m-d'}
},
{
name: 'status', align: 'center', editable: true,
edittype: 'select',//数据要在后台转换为select形式的string字符串
editoptions: {dataUrl: '/banner/showAll'},
//下拉列表中展示的内容
formatter: function (value, options, row) {
// 自定义单元格展示内容
return row.status;
}
},
],
autowidth: true,
pager: '#pager',
rowList: [2, 4, 10, 20, 50],
rowNum: 4,
page: 1,
viewrecords: true,
multiselect: true,
rownumbers: true,
height: 350,
}).navGrid('#pager', {edit: true, add: true, del: true},
{
//控制修改操作
closeAfterEdit: true,
afterSubmit: function (response) {
var id = response.responseJSON.data;
var code = response.responseJSON.status;
console.log(code)
if (code == "updateOk") {
$.ajaxFileUpload({
url: "${pageContext.request.contextPath}/banner/motifyUpload",//用于文件上传的服务器端请求地址
fileElementId: 'cover', //文件上传空间的id属性 <input type="file" id="file" name="file" />
//dataType: 'json', //返回值类型 一般设置为json
//type:'POST',
data: {id: id},
success: function () {
$("#table").trigger("reloadGrid");
}
})
return "true";
}
}
},
{
//控制添加操作
closeAfterAdd: true,
afterSubmit: function (response) {
alert(" zhuijia");
var id = response.responseJSON.data;
var code = response.responseJSON.status;
console.log(code)
if (code == "addOk") {
$.ajaxFileUpload({
url: "${pageContext.request.contextPath}/banner/upload",//用于文件上传的服务器端请求地址
fileElementId: 'cover', //文件上传空间的id属性 <input type="file" id="file" name="file" />
//dataType: 'json', //返回值类型 一般设置为json
//type:'POST',
data: {id: id},
success: function () {
$("#table").trigger("reloadGrid");
}
})
return "true";
}
}
},
{
//控制删除操作
});
})
</script>
2.controller层
// oper 代表请求的操作是什么 | add/del/edit
@ResponseBody
@RequestMapping("operBanner")
public Map<String, String> operBanner(String oper, Banner banner, HttpServletRequest request) {
HashMap hashMap = new HashMap();
if ("add".equals(oper)) {
banner.setId(UUID.randomUUID().toString());
banner.setCreateDate(new Date());
banner.setLastUpdateDate(new Date());
bannerService.insert(banner);
hashMap.put("status", "addOk");
hashMap.put("data", banner.getId());
return hashMap;
} else if ("del".equals(oper)) {
bannerService.deleteById(banner.getId());
hashMap.put("status", "delOk");
return hashMap;
} else if ("edit".equals(oper)) {
//将图片路径设为null
if (banner.getCover().equals("")) {
banner.setCover(null);
}
bannerService.updateById(banner);
hashMap.put("data", banner.getId());
hashMap.put("status", "updateOk");
return hashMap;
} else {
hashMap.put("status", "error");
return hashMap;
}
}
*文件上传*
@RequestMapping("upload")
public void upload(MultipartFile cover, String id, HttpSession session) throws IOException {
System.out.println("id :" + id);
System.out.println("cover:" + cover.getOriginalFilename());
//文件上传
File file = new File(session.getServletContext().getRealPath("/files"), cover.getOriginalFilename());
//如果不存在,则上传
if (!file.exists()) {
cover.transferTo(file);
}
//修改数据库中的图片路径
Banner banner = new Banner();
banner.setId(id);
banner.setCover(cover.getOriginalFilename());
bannerService.updateById(banner);
}
@RequestMapping("motifyUpload")
public void motifyUpload(MultipartFile cover, String id, HttpSession session) throws IOException {
System.out.println("id :" + id);
System.out.println("cover:" + cover.getOriginalFilename());
//文件上传
File file = new File(session.getServletContext().getRealPath("/files"), cover.getOriginalFilename());
//如果不存在,则上传
if (!file.exists()) {
cover.transferTo(file);
}
if (!cover.getOriginalFilename().equals("")) {
//修改数据库中的图片路径
Banner banner = new Banner();
banner.setId(id);
banner.setCover(cover.getOriginalFilename());
bannerService.updateById(banner);
}
}
3.遇到的问题以及解决办法
(1)图片上传上去为假路径
解决办法:获取上传的文件名称,重新调用修改方法,将文件名称传入数据库,注意MultipartFile cover必须为图片的字段名。
(2)修改时不上传图片,路径会变成空
解决办法:使用修改方法时将图片的路径设为null,则不修改
(3)上传完图片之后进不去success方法,页面不刷新
解决办法:当使用json返回值是,方法中没有返回值或者返回值是字符串时,不能使用dataType: ‘json’, 的注释,否则方法会报错。
(4)数据加载不出来
解决办法:使用json作为数据传输时,需要加@RestController