Layui 使用中的问题总结

1,452 阅读1分钟

1.关于layer的提示框,弹出框一闪而过的问题

问题:

使用layer.open()弹出页面层,出现弹框闪跳以下就消失,检查代码无误后在网上发现大神的解析,醍醐灌顶,问题已解决。原文如下:在页面中,layer的弹出框,不管是layer.alert,还是layer.msg等等,都会出现一闪而过的问题  
原文https://blog.csdn.net/qq_20594019/article/details/83956532

原因:

在页面中使用了form表单,把button按钮放在了form中,在这种情况下,如果没有指定button标签的type属性的话,默认会是submit,所以出现了一闪而过的现象解决方法:在button中需要指定type为button

2.layui关闭iframe弹出层后刷新父级页面

//iframe层
layer.open({
  type: 2,
  title: '弹出窗口',
  shadeClose: true,
  shade: 0.8,
  area: ['680px', '600px'],
  content: '弹出窗口的url地址', //iframe的url
  end: function(){
	//window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面 
	return false;
  }
});


$.ajax({
	type:"POST",
	dataType:"json",
	url:"/web/ajax.php",
	data:{
		gongneng:"liuyan",
		classid:classid,
		title:title,
		username:username,
	},
	success:function(result){
		layer.msg(result.msg,{icon: 6,area:['450px', ''],shade : [0.5 , '#000' , true]});
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);//关闭弹出的子页面窗口
		window.parent.location.reload();//写在这里的话是只有提交成功了才刷新那个页面 
	},
	error:function(){
		layer.msg(result.msg,{icon: 2,area:['450px', ''],shade : [0.5 , '#000' , true]});
	}
})`

3.Layui form 主动校验输入项

最近使用Layui Form时遇到一个问题,layui的form 好像只能通过submit来触发表单的验证,当没有submit时就没法进行验证和阻止提交。 于是扩展了一下form.js, 将这一段复制到layui的form.js里即可,代码如下:

(原文链接:blog.csdn.net/qq_17837497…

layui.form.VerifyForm("formInfo")
//成功返回true 失败返回 false boolen型
//这里的“formInfo”就是表单的ID

/////////////////////////javascript
    function SaveForm() {
        if (layui.form.VerifyForm("formInfo"))
         {
            var formData = formEle.GetVal("formInfo");
            var postUrl = "";
            if (!keyValue)
                postUrl = '/SystemModule/BaseUser/SaveForm';
            else {
                formData.UserId = keyValue;
                postUrl = '/SystemModule/BaseUser/UpdateForm';
            }
            parent.$('.layui-layer-btn0').hide();
            $.postData({
                url: postUrl,
                data: formData,
                success: function (data) {
                    parent.layer.closeAll();
                    parent.table.reload('table', {
                        url: '/SystemModule/BaseUser/GetPageListJson'
                    });
                    parent.$('.layui-layer-btn0').show();
                },
                fail: function (xhr) {
                    parent.$('.layui-layer-btn0').show();
                    return layer.msg('Status:' + xhr.status + ',' + xhr.statusText + ',请稍后再试!');
                }
            });
        }
    }