layui layer.load()和ajax

1. layui.load()在ajax使用时,ajax必须是异步模式,不然layui.load()不起作用。

    var loadIndex = '';
    $.ajax({
        type : 'put',
        url : '/equip/servRestart',
        beforeSend: function () {
            loadIndex = layer.load({
                shade: [0.1, '#fff']
            });
        },
        complete: function () {
            layer.close(loadIndex);
        },
        data : {
            version : version
        },
        success : function(data) {
            if (data.status = 200) {
....

以上是我截取的部分伪代码,如果我再加上属性async: false;正在加载中的遮罩就显示不了,为了这个问题,也是很是困扰,去掉async(此属性,为异步,默认true,)或async: true遮罩就会生效;

2. 

//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒 
//eg4
var indexLoad = layer.load(2, {shade:[0.5,'#fff']});//页面会有加载层
//关闭
layer.close(index);
layer.close(indexLoad);

3. 如果,您的业务比较耗时,比如重启之类的,还要拿到后台的返回值,这中情况的话,我还没有什么好的解决方法,据说是因为如果同步执行,浏览器的DOM引擎和JS引擎会冲突,导致DOM引擎被阻塞,加载不了;改为异步,又拿不到返回值,会导致代码没有执行的情况,这就比较矛盾了;不过我提供一种权宜的解决方法,如下

    var loadIndex = '';
	$.ajax({
		type : 'put',
		url : '/equip/servRestart',
        beforeSend: function () {
            loadIndex = layer.load({
                shade: [0.1, '#242527']
            });
        },
        complete: function () {
            layer.close(loadIndex);
        },
		data : {
			version : version
		},
		success : function(data) {
			if (data.status = 200) {
				setTimeout("location.reload()", 1000);
				layer.msg("服务重启成功!", {
					shift : -1,
					time : 1000
				}, function() {
				});
			}
		}
	});

    var loadIndex = '';
    $.ajax({
        type : 'put',
        url : '/equip/servRestart',
        beforeSend: function () {
            loadIndex = layer.load({
                shade: [0.1, '#242527']
            });
        },
        complete: function () {
            layer.close(loadIndex);
        },
        data : {
            version : version
        },
        success : function(data) {
            if (data.status = 200) {
                setTimeout("location.reload()", 1000);
                layer.msg("服务重启成功!", {
                    shift : -1,
                    time : 1000
                }, function() {
                });
            }
        }
    });
在ajax成功返回里,加个延时,改变下代码的执行顺序

要将 jqGrid 中的 loading 改为 layui.loading 并居中加载,可以按照以下步骤进行操作: 1. 在页面引入 layui 的样式文件和 js 文件。 ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script> ``` 2. 定义一个方法,用于显示 layuiloading。 ```javascript function showLoading() { var loading = layui.layer.load(2, { shade: [0.3, '#333'] }); return loading; } ``` 该方法中,`layui.layer.load()` 方法用于显示 loading,参数 2 表示显示类型为转圈加文字,`shade` 参数表示遮罩层颜色和透明度。 3. 在 jqGrid 加载数据前显示 loading,加载完成后隐藏 loading。 ```javascript // 在 jqGrid 加载数据前显示 loading $("#grid").jqGrid({ ... loadBeforeSend: function(xhr, settings) { var loading = showLoading(); $(this).data("loading", loading); // 将 loading 对象存储在 jqGrid 中 }, ... }); // 加载完成后隐藏 loading $("#grid").jqGrid({ ... loadComplete: function(data) { var loading = $(this).data("loading"); layui.layer.close(loading); }, ... }); ``` 在 `loadBeforeSend` 回调函数中,调用 `showLoading` 方法显示 loading,并将 loading 对象存储在 jqGrid 中。在 `loadComplete` 回调函数中,通过 `$(this).data("loading")` 获取存储的 loading 对象,并调用 `layui.layer.close` 方法隐藏 loading。 4. 居中显示 loading。 ```css #layui-layer2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 通过给 loading 所在的 div(id 为 `layui-layer2`)设置样式,使其在页面居中显示。 以上就是将 jqGrid 中的 loading 改为 layui.loading 并居中加载的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值