使用layer的iframe层提交表单后，需要关闭当前的iframe层，然后刷新父页面的方法
参考文档 ：https://blog.csdn.net/u011020900/article/details/52083166
<script type="text/javascript" src="/lib/js/jquery.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js"></script>
<input type="button" class="layui-btn layui-btn-radius layui-btn-primary"
onclick="edit(${it.id})" value="编辑">
/**
* 编辑
* @param resId
*/
function edit(resId) {
//iframe层
layer.open({
type: 2,
title: '编辑服务资源',
shadeClose: true,
shade: 0.8,
area: ['800px', '600px'],
content: '/resource/editResourceById?resId=' + resId //iframe的url
});
}
@RequestMapping(value = "/editResourceById", method = RequestMethod.GET)
public ModelAndView editResourceById(@RequestParam(value = "resId", required = true) Integer resId) {
ModelAndView modelAndView = new ModelAndView();
Resource resource = resourceService.getResourceById(resId);
modelAndView.addObject("info", resource);
modelAndView.setViewName("resource/editResourceById");
return modelAndView;
}
<body class="layui-layout-body">
<form id="editResForm" class="layui-form" method="post" action="#">
<div class="layui-form-item ">
<label class="layui-form-label">项目编号</label>
<div class="layui-input-block">
<input type="hidden" name="id" value="${info.id}">
<input type="text" name="resNo" disabled placeholder="请输入项目编号"
value="${info.resNo!}"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">项目名称</label>
<div class="layui-input-block">
<input type="text" name="resName" placeholder="请输入项目名称"
value="${info.resName!}"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资源类型</label>
<div class="layui-input-block">
<input type="button" class="layui-btn layui-btn-primary"
autocomplete="off" class="layui-input" value="服务资源">
<input type="hidden" name="resType" value="103">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">项目素材图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" name="resPicPath" id="resPicPath">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
<div class="layui-form-item layui-form-text kindeditor">
<label class="layui-form-label">资源描述</label>
<div class="layui-input-block">
<textarea name="resDesc" placeholder="请输入内容" class="layui-textarea">${info.resDesc!}</textarea>
</div>
</div>
<div class="layui-form-item layui-form-text kindeditor">
<label class="layui-form-label">申请日期</label>
<div class="layui-inline">
<input type="text" class="layui-input" value="${(info.addTime?string('yyyy-MM-dd'))!}" name="addTime"
id="addTime">
</div>
</div>
<div class="layui-form-item layui-form-text kindeditor">
<label class="layui-form-label">截止日期</label>
<div class="layui-inline">
<input type="text" class="layui-input" name="expiresDate" id="expiresDate">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="submit" class="layui-btn" value="提交">
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
layui.use('layer', function () {
var layer = layui.layer;
// 这个是在iframe里面的js代码
var url = '/resource/saveEditResource';
var frameindex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
$(document).on('click', '[type=submit]', function () {
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
var data = $("#editResForm").serialize();
$.post(url, data, function (ev) {
if (ev.code == 200) {
layer.msg(ev.msg);
parent.location.href = "/resource/getResourceList?resType=103";
} else {
layer.close(index);
layer.msg(ev.msg);
}
}, 'json')
return false;
});
})
// 时间插件
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#expiresDate' //指定元素
});
});
layui.use('laydate', function () {
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#addTime' //指定元素
});
});
@RequestMapping(value = "/saveEditResource", method = RequestMethod.POST)
@ResponseBody
public Map saveEditResource(Resource Resource) {
boolean flag = resourceService.saveEditResource(Resource);
Map map = new HashMap();
if (flag) {
map.put("code", 200);
map.put("msg", "更改成功");
} else {
map.put("code", "500");
map.put("msg", "更改失败，代码错误");
}
return map;
}
/**
* 获取资源列表
*
* @param resType
* @return
*/
@RequestMapping(value = "/getResourceList", method = RequestMethod.GET)
public ModelAndView getResourceList(@RequestParam(value = "resType", required = true) Integer resType) {
ModelAndView model = new ModelAndView();
List<Resource> resourceList = resourceService.getResourceList(resType);
model.addObject("resourceList", resourceList);
if (101 == resType) { // 跳转到 广告 资源列表
model.setViewName("account/reslist");
} else if (102 == resType) { // 跳转到 云 资源列表
} else if (103 == resType) { // 跳转到 服务 资源列表
model.setViewName("resource/getResourceList");
}
return model;
}
