layui提交彈出頁面的form表單

使用layui后臺(tái)框架，從父頁面操作提交子頁面的表單信息
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、景谷網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為景谷等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1. 父頁面

1.1 html

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

1.2 相關(guān)js

// 綁定新增用戶事件
$("#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.獲取子頁面按鈕
            var iframeWindow = layero.find('iframe')[0].contentWindow; // 4.獲取子頁面iframe對(duì)象
            // 5.監(jiān)聽子頁面提交事件
            iframeWindow.layui.form.on('submit(' + submitFilterID + ')', function(data) {
                // 5.1新增用戶
                addUser(index, data);
            });  
            // 6.觸發(fā)子頁面點(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});
            }
        });
}

2. 子頁面

2.1 html

<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>

2.2 js

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

table.reload之后表格toolbar工具欄按鈕失效解決方案,請(qǐng)點(diǎn)擊layui的table在reload之后工具欄按鈕失效的問題解決方案

網(wǎng)站名稱：layui提交彈出頁面的form表單
文章地址：http://chinadenli.net/article0/ihgooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、定制開發(fā)、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站、電子商務(wù)、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容