layui提交form表单的示例
admin
2023-02-12 16:40:04
0

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

1. 父页面

1.1 html

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

   
               
                   
   
   
               
                   
   
   
               
                   
   
   
       
                   
   

2.2 js

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

相关内容

热门资讯

德国总理:美国正在被伊朗羞辱 德国之声4月27日报道,德国总理默茨在访问一所学校时表示,在当前的持续冲突中,伊朗领导层正试图羞辱美...
理响中国|“长”歌以行,风云激... 光阴如梭,东方潮阔。这里是中国的长三角,世界的长三角。无论过去、现在还是未来,这片土地都因时代而生,...
白宫:特朗普及其国安团队开会讨... 新华社华盛顿4月27日电 美国白宫新闻秘书莱维特27日在记者会上证实,总统特朗普及其国家安全团队当天...
人民日报刊文:日本放开杀伤性武... 日本放开杀伤性武器出口推高地缘冲突风险(国际论坛)常思纯《人民日报》(2026年04月28日 第 0...
医疗保障法草案二审:明确生育保... 满足多样化健康保障需求本报记者 彭 波4月27日,医疗保障法草案二审稿提请十四届全国人大常委会第二十...
天津一景区发生自转旋翼机事故1... 澎湃新闻记者 吕新文中国民用航空华北地区管理局4月22日公布《豪客通航“10•1”天津长芦汉盐旅游区...
卡塔尔埃米尔与美国总统特朗普通... 当地时间24日,卡塔尔埃米尔塔米姆与美国总统特朗普通电话,重点就中东地区局势以及伊朗与美国谈判问题交...
男子30年前被扣押2859克黄... 澎湃新闻记者 王鑫家住辽宁省大连市的潘永嘉近日向澎湃新闻反映称,三十年前,他在大连周水子机场被盖州市...
商务部:取消反制欧盟两家金融机... 中华人民共和国商务部令二〇二六年 第1号鉴于欧盟已取消对中国两家金融机构的制裁措施,现公布《关于取消...
过去24小时共有5艘船只通过霍... 总台记者当地时间24日获悉,过去24小时内,共有5艘船只通过霍尔木兹海峡,其中包括一艘伊朗油轮。(总...