欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui中弹出iframe层时将弹出层的保存按钮绑定为iframe中表单的提交按钮的方法

程序员文章站 2022-04-08 09:27:40
...

 弹出层提交表单的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}$")
							.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}$").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}$").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来进行

相关标签: layui