layui弹出层使用心得

1,上传图片

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

    upload.render({
        elem: '#test3',
        url: "<?=yii\helpers\Url::to(['/tools/upload'])?>",
        done: function(res){
            console.log(res);
            if(res.code==200){
                //修改上传成功后需要修改的地方
                $("#pic").val(res.data);
                $("#demo1").attr('src',res.data);
                layer.msg("上传成功");
            }else{
                layer.msg("上传失败");
            }
        },
        error: function(){
            layer.msg("请求异常");
        }
    });
});

url是PHP后台写的图片上传地址，这里就不放出来了

2，在当前页面弹出表单提交

function addProduct() {
    layer.open({
        type: 1, 
        title:"新增产品信息",
        area:['100%','100%'],
        btn: ['确定', '取消'], 
        content: $("#window"),
        yes:function(index,layero){
            $.ajax({
                type: "POST",
                url: "<?php echo Url::toRoute('/order-product/create') ?>",
                data: {
                    product_name: $('#product_name').val(),
                    pic: $('#pic').val(),
                    code: $('#code').val(),
                    guige: $('#guige').val(),
                    tiaoma: $('#tiaoma').val(),
                    num: $('#num').val(),
                    },
                dataType: "JSON",
                success: function(res){
                    console.log(res);
                    addProductList(res);
                    layer.close(index);
                }
            });
        },
        cancel: function(){
            //右上角关闭回调
            console.log(22222);
        }
    });
}

当前页面的click事件addProduct触发，打开的是id="window"的弹出层，弹出层的确定按钮会进入yes,然后使用ajax提交表单数据

3.弹出确认取消提示按钮

layer.confirm('确认删除?', {icon: 3, title:'提示'}, function(index){    
        $.ajax({
            type:'POST',
            url:"<?php echo Url::toRoute('/customer-gd/qd-message-delete') ?>",
            data:{
                id:_id,
            },
            success: function(res){
                    layer.close(index);
                    $("#qd_message_add .tr_" + _id).remove();       
                    layer.msg('删除成功', {
                        time: 1500,
                    }); 
                }
        })
              
    });