layui内置loading等待加载

https://www.cnblogs.com/moutudou/p/9453321.html

 

点击功能按钮之后

var loading = layer.load(0, {
                    shade: false,
                    time: 2*1000
                });

参数:  icon:0,1,2   loading风格

    shade:false  是否有遮罩,true表示有遮罩

    time : 2*1000  设定最长等待时间,设置时间之后,loading会在时间到之后自动关闭

关闭"loading" (在ajax成功或失败回调中) :

layer.close(loading);

Ps:load默认不会自动关闭

要将 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、付费专栏及课程。

余额充值