layui提交弹出页面的form表单

使用layui后台框架，从父页面操作提交子页面的表单信息

1. 父页面

1.1 html

<button type="button" class="layui-btn layui-btn-sm" id="add">新增用户</button>

1.2 相关js

// 绑定新增用户事件
$("#add").on("click", function() {
	layer.open({
		skin : 'layui-layer-molv',
		type : 2,
		title : '新增用户',
		area : [ '440px', '390px' ],
		shade : 0.8, // 遮罩层透明度
		id : 'LAY_layuipro', //设定一个id，防止重复弹出
		resize : false, //是否允许拉伸
		btn : [ '确认', '关闭' ],
		moveType : 1, //拖拽模式，0或者1
		content :  'user/add/view',
		yes: function(index, layero){  // 确认按钮回调方法,两个参数分别为当前层索引、当前层DOM对象
			var submitID = 'LAY-back-submit'; // 1.提交按钮ID
			var submitFilterID = 'LAY-front-submit'; // 2.提交按钮lay-filter

			var submit = layero.find('iframe').contents().find('#'+ submitID); // 3.获取子页面按钮
			var iframeWindow = layero.find('iframe')[0].contentWindow; // 4.获取子页面iframe对象
			// 5.监听子页面提交事件
			iframeWindow.layui.form.on('submit(' + submitFilterID + ')', function(data) {
				// 5.1新增用户
				addUser(index, data);
			});  
			// 6.触发子页面点击事件
			submit.trigger('click');
		}
	});
});

// 新增用户
function addUser(index,formData) {
	// 加载提示
	var loadingMsg = layer.msg('数据请求中,请稍候...', {icon: 16,scrollbar: false,time: 0,shade: [0.8, '#393D49']});
		// form请求地址
		var formUrl = projectName + "sysUser/add";
		$.ajax({
			type: 'POST',
			async: false, // 默认异步true,false表示同步
			url: formUrl, // 请求地址
			dataType: 'json', // 服务器返回数据类型
			data: formData.field, //获取提交的表单字段
			success: function(data) {
				layer.close(loadingMsg); // 关闭提示层
				if (data.code == '1002') {
					// 信息提示
					layer.alert(data.message, {skin: 'layui-layer-molv', closeBtn: 0,icon: 1}, function(alertIndex){
						layer.close(alertIndex)	// 关闭当前alert
						layer.close(index); 	// 关闭弹出层open
						/*
							刷新表格数据,如果使用的是layer的toolbar工具栏,
							刷新后按钮绑定将会失效,解决方案请看文章底部链接
						*/
						reloadTable(); 			
					});
				} else {
					layer.alert(data.message, {icon: 5});
				}
			},
			error: function(XMLHttpRequest, textStatus, e) {
					layer.close(loadingMsg);
					layer.msg('数据请求发生异常,请稍后重试', {icon: 16,scrollbar: false});
			}
		});
}

2. 子页面

2.1 html

<div class="layui-form" style="padding: 20px 30px 0 0;">
	<div class="layui-form-item">
		<label class="layui-form-label">用户名</label>
		<div class="layui-input-inline">
			<input type="text" name="userName" lay-verify="required" placeholder="请输入用户名(必填)" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">手机</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" lay-verify="phone" placeholder="请输入号码" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">邮箱</label>
		<div class="layui-input-inline">
			<input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item layui-hide">
		<div class="layui-input-block layui-right">
			<button type="submit" class="layui-btn" lay-submit lay-filter="LAY-front-submit" id="LAY-back-submit">确认</button>
		</div>
	</div>
</div>

2.2 js

layui.use(['form','layer'],function(){
	var form = layui.form,
		   layer = parent.layer === undefined ? layui.layer : top.layer;
})

table.reload之后表格toolbar工具栏按钮失效解决方案,请点击layui的table在reload之后工具栏按钮失效的问题解决方案