layui中弹出层的保存按钮绑定为iframe中表单的按钮
弹出层提交表单的js
layer.open({
type : 2,
title : '添加权限',
area : [ '500px', '450px' ],
offset : '160px',
shadeClose : true, // 点击遮罩关闭
btn : ['保存','取消'],
content : 'permission_add.html',
success : function(layero, index) { // 成功弹出后回调
},
yes : function(index, layero) { // 保存按钮回调函数
// 获取iframe层的body
var body = layer.getChildFrame('body', index);
// 找到隐藏的提交按钮模拟点击提交
body.find('#permissionSubmit').click();
},
btn2 : function(index, layero) { // 取消按钮回调函数
layer.close(index); // 关闭弹出层
}
});
弹出层表单中隐藏的提交按钮代码
<div class="layui-form-item" hidden>
<div class="layui-input-block">
<button id="permissionSubmit" class="layui-btn" lay-submit lay-filter="*">
保存
</button>
</div>
</div>iframe页面js内容
<script>
// 初始化表单
layui.use([ 'form', 'layer' ], function() {
var form = layui.form, layer = layui.layer, $ = layui.$;
// 更新页面渲染，否则会造成页面加载元素不完整
form.render();
// 自定义表单验证
form.verify({
name : function(value, item) { // 验证功能名
var defaultName = $('#defaultName').val(); // 默认的name
if (value !== defaultName || 'default' === defaultName) { // 判断功能名字是否发生改变
if (!new RegExp("^[a-zA-Z0-9|\u4e00-\u9fa5\]{2,10}#34;)
.test(value)) {
return '权限名必须是2-10位中英文或者数字的字符';
} else {
code = 0; // 用来判断功能名是否存在
$.ajax({
type : 'POST',
url : 'queryNameIsExist.do',
data : {
name : value
},
async : false,
dataType : 'json',
success : function(data) {
if (!data.success) { // 功能名已经存在
code = 1;
}
},
error : function(data) {
code = 2;
}
});
// 根据code判断角色名是否存在
if (code == 1) {
return '功能名已经存在,请更换';
} else if (code == 2) {
return '出现异常,请联系管理员';
}
}
}
},
url : function(value, item) { // 校验功能url
var defaultUrl = $('#defaultUrl').val(); // 默认的url
if (value !== defaultUrl || 'default' === defaultUrl) { // 判断功能url是否发生改变
if (!new RegExp("^[a-zA-Z0-9/]{5,30}#34;).test(value)) {
return 'url必须是5-30位英文和/组成的字符串';
} else {
code = 0; // 用来判断功能url是否存在
$.ajax({
type : 'POST',
url : 'queryUrlIsExist.do',
data : {
name : value
},
async : false,
dataType : 'json',
success : function(data) {
if (!data.success) { // 功能url已经存在
code = 1;
}
},
error : function(data) {
code = 2;
}
});
// 根据code判断功能url是否存在
if (code == 1) {
return '功能url已经存在';
} else if (code == 2) {
return '出现异常,请联系管理员';
}
}
}
},
permission : function(value, item) { // 校验权限字符串
var defaultPermission = $('#defaultPermission').val(); // 默认的权限字符串
if (value !== defaultPermission
|| 'default' !== defaultPermission) { // 判断功能权限字符串是否发生改变
if (!new RegExp("^[a-zA-Z0-9]{2,20}#34;).test(value)) {
return '权限字符串必须是2-20位英文字符';
} else {
code = 0; // 用来判断功能权限字符串是否存在
$.ajax({
type : 'POST',
url : 'queryPermissionIsExist.do',
data : {
name : value
},
async : false,
dataType : 'json',
success : function(data) {
if (!data.success) { // 功能权限字符串已经存在
code = 1;
}
},
error : function(data) {
code = 2;
}
});
// 根据code判断功能权限字符串是否存在
if (code == 1) {
return '功能权限字符串已经存在';
} else if (code == 2) {
return '出现异常,请联系管理员';
}
}
}
}
});
// 监听form表单提交
form.on('submit(save)', function(data) {
$.ajax({
type : 'POST',
url : 'createResource.do',
data : {
name : $('#name').val(),
url : $('#url').val(),
type : $('input[name]:checked').val(),
parentId : $('#parentId').val(),
permission : $('#permission').val(),
available : $('#available').is(':checked') === true ? 1 : 0
},
dataType : 'json',
success : function(data) {
// 成功提示框
parent.layer.msg('添加成功', {
icon : 6,
});
parent.layer.closeAll('iframe'); //关闭弹框
},
error : function(data) {
// 异常提示
parent.layer.msg('出现网络故障', {
icon : 5
});
parent.layer.closeAll('iframe'); //关闭弹框
}
});
return false;
});
});
</script>我们只需要在保存按钮的回调函数中获取到iframe页面的隐藏的提交按钮然后使用click()事件就可以提交弹出iframe层的表单了，表单验证和表单提交都在iframe页面的js中，iframe页面的js中需要注意的是弹窗操作需要操作父页面的layer来进行
