layui弹出层使用心得

it2024-10-16  42

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, }); } }) });
最新回复(0)