您好,登錄后才能下訂單哦!
使用layui后臺(tái)框架,從父頁(yè)面操作提交子頁(yè)面的表單信息
<button type="button" class="layui-btn layui-btn-sm" id="add">新增用戶</button>
// 綁定新增用戶事件
$("#add").on("click", function() {
layer.open({
skin : 'layui-layer-molv',
type : 2,
title : '新增用戶',
area : [ '440px', '390px' ],
shade : 0.8, // 遮罩層透明度
id : 'LAY_layuipro', //設(shè)定一個(gè)id,防止重復(fù)彈出
resize : false, //是否允許拉伸
btn : [ '確認(rèn)', '關(guān)閉' ],
moveType : 1, //拖拽模式,0或者1
content : 'user/add/view',
yes: function(index, layero){ // 確認(rèn)按鈕回調(diào)方法,兩個(gè)參數(shù)分別為當(dāng)前層索引、當(dāng)前層DOM對(duì)象
var submitID = 'LAY-back-submit'; // 1.提交按鈕ID
var submitFilterID = 'LAY-front-submit'; // 2.提交按鈕lay-filter
var submit = layero.find('iframe').contents().find('#'+ submitID); // 3.獲取子頁(yè)面按鈕
var iframeWindow = layero.find('iframe')[0].contentWindow; // 4.獲取子頁(yè)面iframe對(duì)象
// 5.監(jiān)聽子頁(yè)面提交事件
iframeWindow.layui.form.on('submit(' + submitFilterID + ')', function(data) {
// 5.1新增用戶
addUser(index, data);
});
// 6.觸發(fā)子頁(yè)面點(diǎn)擊事件
submit.trigger('click');
}
});
});
// 新增用戶
function addUser(index,formData) {
// 加載提示
var loadingMsg = layer.msg('數(shù)據(jù)請(qǐng)求中,請(qǐng)稍候...', {icon: 16,scrollbar: false,time: 0,shade: [0.8, '#393D49']});
// form請(qǐng)求地址
var formUrl = projectName + "sysUser/add";
$.ajax({
type: 'POST',
async: false, // 默認(rèn)異步true,false表示同步
url: formUrl, // 請(qǐng)求地址
dataType: 'json', // 服務(wù)器返回?cái)?shù)據(jù)類型
data: formData.field, //獲取提交的表單字段
success: function(data) {
layer.close(loadingMsg); // 關(guān)閉提示層
if (data.code == '1002') {
// 信息提示
layer.alert(data.message, {skin: 'layui-layer-molv', closeBtn: 0,icon: 1}, function(alertIndex){
layer.close(alertIndex) // 關(guān)閉當(dāng)前alert
layer.close(index); // 關(guān)閉彈出層open
/*
刷新表格數(shù)據(jù),如果使用的是layer的toolbar工具欄,
刷新后按鈕綁定將會(huì)失效,解決方案請(qǐng)看文章底部鏈接
*/
reloadTable();
});
} else {
layer.alert(data.message, {icon: 5});
}
},
error: function(XMLHttpRequest, textStatus, e) {
layer.close(loadingMsg);
layer.msg('數(shù)據(jù)請(qǐng)求發(fā)生異常,請(qǐng)稍后重試', {icon: 16,scrollbar: false});
}
});
}
<div class="layui-form" >
<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="請(qǐng)輸入用戶名(必填)" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手機(jī)</label>
<div class="layui-input-inline">
<input type="text" name="phone" lay-verify="phone" placeholder="請(qǐng)輸入號(hào)碼" 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="請(qǐng)輸入郵箱" 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">確認(rèn)</button>
</div>
</div>
</div>
layui.use(['form','layer'],function(){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer;
})
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。