layui的表单layer弹出框

r囧r小猫 2022-12-17 07:10 103阅读 0赞

**这是用到的头工具栏的新增数据**

//头工具栏事件
        table.on('toolbar(saleChances)', function(obj){ 
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus)
            switch(obj.event){ 
                case 'add':
                    openAdd();
    
    
                    // window.location.href = ctx + '/sale_chance/addOrUpdateSaleChancePage';
                    break;
                case 'del':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

**这是要弹出的表单，content的内容直接就是form表单的内容，提交用的是layer的btn和成功回调**

function openAdd() { 
            layer.open({ 
                type: 1,
                area:['80%','80%'],
                content: '<form class="layui-form" style="width:80%;" id="window">\n' +
                    ' <input type="hidden" name="id" value="">\n' +
                    ' <input type="hidden" name="man" value="">\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">客户名称</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' lay-verify="required" name="customerName" id="customerName" value="" placeholder="请输入客户名称">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">机会来源</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' name="chanceSource" id="chanceSource" placeholder="请输入机会来源" value="">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">联系人</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' id="linkMan" name="linkMan" lay-verify="required"\n' +
                    ' placeholder="请输入联系人" value="">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    '\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">联系电话</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' lay-verify="phone" name="linkPhone" id="phone" placeholder="请输入联系电话" value="">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">概要</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' name="overview" id="overview" placeholder="请输入概要" value="">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">成功几率(%)</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <input type="text" class="layui-input"\n' +
                    ' id="cgjl" name="cgjl" placeholder="请输入成功几率" value="">\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">机会描述</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <textarea placeholder="请输入机会描述信息" name="description" id="description" class="layui-textarea"></textarea>\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <div class="layui-form-item layui-row layui-col-xs12">\n' +
                    ' <label class="layui-form-label">指派给</label>\n' +
                    ' <div class="layui-input-block">\n' +
                    ' <select name="assignMan" id="assignMan">\n' +
                    ' <option id="option" value="" >请选择</option>\n' +
                    ' </select>\n' +
                    ' </div>\n' +
                    ' </div>\n' +
                    ' <br/>\n' +
                    '</form>',
                btn: ['确定', '取消'],
                yes: function(index, layero){ 
                    //按钮【按钮一】的回调
                    $.ajax({ 
                        type:'post',
                        url:ctx+'/sale_chance/save',
                        dataType:'json',
                        data:{ 
                            chanceSource:$('#chanceSource').val(),
                            customerName:$('#customerName').val(),
                            cgjl:$('#cgjl').val(),
                            linkMan:$('#linkMan').val(),
                            linkPhone:$('#phone').val(),
                            overview:$('#overview').val(),
                            description:$('#description').val(),
                            assignMan:$("#assignMan").find("option:selected").attr("value")
                        },
                        success:function (msg) { 
                            var code = msg.code;
                            if(code === 200){ 
                                layer.msg('添加成功',{ 
                                    time:1000
                                },function () { 
                                    window.location.href = ctx+'/sale_chance/index';
                                })
                            }else{ 
                                layer.msg(msg.msg)
                            }
                        }
                    });
                },
                cancel: function(){ 
    
                }
    
            })
    
    
            $.ajax({ 
                type:'post',
                data:{ },
                dataType:'json',
                url:ctx+'/user/list',
                success:function (msg) { 
                    var code = msg.code;
                    if(code === 0){ 
                        var data = msg.data;
                        var length = data.length;
                        for (var i = 0; i < length; i++) { 
                            $('#assignMan').append('<option value="'+data[i].id+'" >'+data[i].trueName+'</option>')
                        }
                        form.render('select');
                    }else{ 
                        layer.msg(msg.msg);
                    }
                }
            });
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui的layer.confirm弹框用法，很详细

Layui的弹框用法一、官网示例二、自定义一些样式 1、自定义标题 2、给提示框内容加上图标 3、定义按钮的位置

绝地灬酷狼/ 2024年04月08日 13:37/ 0 赞/ 23 阅读

相关利用layer制作好看的弹出框

一、下载layer [http://layer.layui.com/][http_layer.layui.com] 二、效果图 ![1509251-20190921105

Love The Way You Lie/ 2023年08月17日 17:27/ 0 赞/ 75 阅读

相关 layui的表单layer弹出框

这是用到的头工具栏的新增数据 //头工具栏事件 table.on('toolbar(saleChances)', function(obj){

r囧r小猫/ 2022年12月17日 07:10/ 0 赞/ 104 阅读

相关 Layui关于layer弹出层的使用心得

1.动态修改父级标题使用layui.layer打开一个iframe页面，如果想在子页面修改父标题的内容也就是 layer.open({title:"123"

╰半橙微兮°/ 2022年12月06日 05:27/ 0 赞/ 167 阅读

相关 layui 弹框

信息框(msg、alert、open、confirm) icon:0 ![97c281a75adf80a3f6b2f8efd4a0abc7.png][] icon:1

旧城等待，/ 2022年09月10日 14:23/ 0 赞/ 139 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 398 阅读

相关 Layer.js——强大的弹出框

![这里写图片描述][SouthEast] 简介 -------------------- layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于

青旅半醒/ 2022年05月16日 03:14/ 0 赞/ 238 阅读

相关 layui 关闭弹出框

作者：TROY\_Musou 原文：[https://blog.csdn.net/troy\_musou/article/details/73499459][https_b

快来打我*/ 2022年04月03日 13:40/ 0 赞/ 367 阅读

相关 layui layer弹出框alert,confim

layer.confirm('内容', { yes:function(){ layer.closeAll();//确认按钮如果不

Myth丶恋晨/ 2022年02月04日 08:45/ 0 赞/ 558 阅读

相关 layer弹出表单

<button class="am-btn am-btn-default am-btn-xs am-text-secondary"

客官°小女子只卖身不卖艺/ 2021年09月08日 17:14/ 0 赞/ 382 阅读