精华内容
下载资源
问答
  • layui加载.md

    2020-04-15 10:43:16
    layui加载
  • layui正在加载遮罩层

    万次阅读 2019-06-20 12:02:10
     time为0,不会主动关闭,如果为5,5秒后就会关闭。 3.事例 function delComm(index){ var url = "deleteStationInfoById" var data = { "id" : $("#id").val(), "type" : $("[name='del']:checked")....

    1.场景

      项目开发过程中,可能会遇到,后台响应很慢的情况,这是,前端就需要给出友好的提示,以便让用户有更好的体验。

      拿我个人项目中的一个事例说一下,删除站点的时候,需要删除站点的数据明细,数据明细有100w左右,删除100w数据,响应的时长肯定很长,不可能让用户,傻傻的一直等把,以我的经验来说,我发现点击提交后,很久没有响应,我就觉得网站有问题,就会按F5刷新。

    2.代码

    //加载中样式... 
    var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});
    layer.close(loading);

      time为0,不会主动关闭,如果为5,5秒后就会关闭。

    3.事例

    function delComm(index){
     var url = "deleteStationInfoById"
      var data = {
        "id" : $("#id").val(),
        "type" : $("[name='del']:checked").val(),
        "pwd" : $("#pwd").val(),
      }
     //加载中样式... 
     var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});
      $.ajax({
       url:url,
       dataType : "json",
       data : data,
       success : function(data) {
        layer.close(loading);
        if(data.code == 0){
         layer.msg(data.error)
         layer.close(index);
          }else{   //成功
           layer.closeAll();
           layer.msg(data.error, {icon: 1});
           setTimeout(function(){
           $(window.parent.document).find("#form").submit();
           },500);
          }
       }
     });
    }

    结合事例代码分析,在点击删除按钮后,会触发ajax请求,在ajax前

     //加载中样式... 
     var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});

    ajax后:

          layer.close(loading);

    这样就很好的模拟了,后台响应慢的过程中,前端无法操作的效果。效果图如下:

    如果你热衷技术,喜欢交流,欢迎加入我们! 

    欢迎关注公众号,免费领取各种学习视频,学习相关java各个技术点面试知识,有相关学习疑问或者面试困惑,也可以通过公众号私信博主

    展开全文
  • layui 弹框加载

    千次阅读 2019-04-23 11:10:50
    simpleData: {enable: true}//确定ztree初始化时的节点数据、异步加载时的节点数据、或addNodes方法中输入的newNodes数据是否采用简单数据模式 } }; $.get('authTree', { roleId: roleId }, function (data) {...

    html部分:

    <div style="height: 350px;overflow-y: auto;overflow-x: hidden;">
        <input id="roleId" type="hidden" value="${roleId}">
        <ul id="treeAuth" class="ztree" style="padding: 20px 0px 20px 40px;"></ul>
    </div>

    js部分:

    <script>
        layui.use(['layer', 'admin'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var admin = layui.admin;
    
            var roleId = $('#roleId').val();
            layer.load(2);
            var setting = {
                check: {enable: true},//设置ztree上的节点是否显示check/radio true/false分别表示显示不显示单选框或复选框
                data: {
                    simpleData: {enable: true}//确定ztree初始化时的节点数据、异步加载时的节点数据、或addNodes方法中输入的newNodes数据是否采用简单数据模式
                }
            };
            $.get('authTree', {
                roleId: roleId
            }, function (data) {
                $.fn.zTree.init($('#treeAuth'), setting, data);
                layer.closeAll('loading');
            }, 'json');
    
            // 保存按钮点击事件
            $('#btnSave').click(function () {
                layer.load(2);
                var treeObj = $.fn.zTree.getZTreeObj('treeAuth');
                var nodes = treeObj.getCheckedNodes(true);
                var ids = new Array();
                for (var i = 0; i < nodes.length; i++) {
                    ids[i] = nodes[i].id;
                }
                $.post('updateRoleAuth', {
                    roleId: roleId,
                    authIds: JSON.stringify(ids)
                }, function (data) {
                    layer.closeAll('loading');
                    if (200 == data.code) {
                        top.layer.msg(data.msg, {icon: 1});
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        top.layer.msg(data.msg, {icon: 2});
                    }
                }, 'json');
            });
    
        });
    </script>

    后台代码:

    /**
     * 角色权限树
     */
    @ResponseBody
    @GetMapping("/authTree")
    public List<Map<String, Object>> authTree(Integer roleId) {
        List<Authorities> roleAuths = authoritiesService.listByRoleId(roleId);
        List<Authorities> allAuths = authoritiesService.list();
        List<Map<String, Object>> authTrees = new ArrayList<>();
        for (Authorities one : allAuths) {
            Map<String, Object> authTree = new HashMap<>();
            authTree.put("id", one.getAuthorityId());
            authTree.put("name", one.getAuthorityName() + " " + StringUtil.getStr(one.getAuthority()));
            authTree.put("pId", one.getParentId());
            authTree.put("open", true);
            authTree.put("checked", false);
            for (Authorities temp : roleAuths) {
                if (temp.getAuthorityId().equals(one.getAuthorityId())) {
                    authTree.put("checked", true);
                    break;
                }
            }
            authTrees.add(authTree);
        }
        return authTrees;
    }

    页面展示:

     

    展开全文
  • layui 实现加载

    2021-05-29 11:40:20
    layer.closeAll();//疯狂模式,关闭所有层 layer.closeAll('dialog'); //关闭信息框 ...//关闭加载层 layer.closeAll('tips');//关闭所有的tips层 var myMsg = layer.msg("加载中...",{ icon:16, tim
    layer.closeAll();//疯狂模式,关闭所有层
    layer.closeAll('dialog'); //关闭信息框
    layer.closeAll('page');//关闭所有页面层
    layer.closeAll('iframe');//关闭所有的iframe层
    layer.closeAll('loading');//关闭加载层
    layer.closeAll('tips');//关闭所有的tips层
    
    
    var myMsg = layer.msg("加载中...",{
    	icon:16,
    	time:-1
    })
    
    layer.close(myMsg);//手动关闭
    
    展开全文
  • 近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据... //这里是必须要有的,_index的作用是用来关闭遮罩,详细看layui的文档 var _index; var _lp_baseTime = 0; var _lp
  • 加上加载动画很简单,layui有现成的。但是还要动画。。我tm(手动微笑),原谅我水平比较低。然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的。。。 上面废话有点多,直接切入正题。 首先是html代码。。。。...

    近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示。加上加载动画很简单,layui有现成的。但是还要动画。。我tm(手动微笑),原谅我水平比较低。然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的。。。

    上面废话有点多,直接切入正题。

    首先是html代码。。。。。(不存在的2333333........) 

     

    然后是js代码:

        //这里是必须要有的,_index的作用是用来关闭遮罩,详细看layui的文档
        var _index;
        var _lp_baseTime = 0;
        var _lp_startTime = 0;
        function updateLoadProgress() {
            if (_lp_baseTime < 0) {
                layer.close(_index);
                return;
            }
            var dval = parseInt(new Date().valueOf())- parseInt(_lp_startTime);
            var timeDifference = (dval / _lp_baseTime).toFixed(2);
            var lp = timeDifference < 1 ? timeDifference * 100 : 99;
            $("#loadProgress").html(parseInt(lp));
            setTimeout(function () { updateLoadProgress(); return; }, 650);
        }
    
    
        function 你的函数(){
        
        $.ajax({
            url:url,
            async:true,
            data:{},
            beforeSend:function(){
                //敲黑板
                _index = layer.load(1, {
                        content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
                        shade: [0.5, '#000']
                    });
                //这里是预估的时间,因为整个进度都是根据消耗时间计算的 = =
                //这里的start,end,stns都是原始项目里带的。这个的作用是计算要等待的时长的,可以给一个固定值或者其他的东西公式,保证结果是正整数,单位是毫秒即可。
                _lp_baseTime = Math.abs(new Date(end).valueOf() - new Date(start).valueOf()) / 3600000 * stns.split(',').length * 150;
                _lp_startTime = new Date().valueOf();
    
               setTimeout(function () { updateLoadProgress(); return; }, 60);
            },
            success:function(){ _lp_baseTime = -1; $("#loadProgress").html("100");layer.close(_index); },
            error:function(){
                    _lp_baseTime = -1;
                    layer.close(_index);
                }
        });
    
        }

    OK,就是这么多,主要是利用预估的时间与现在已进行时间进行预估做比较,所以实际使用的时候还要进行一定程度的调整,但是,最起码也是个思路是不是233333,参考一下吧

    超过时间时进度会定格在99%,所以,emmmm....注意预留一些时间

    展开全文
  • $.ajaxSetup({ beforeSend: function () { layui.use('layer', function () { layui.layer.load(); //console.log(Lodingin...
  • LayUI加载的官方文档地址 首先下载layui的架包 把下载好架包的文件取出,放入到项目中,我这里使用的是idea 3.在HTML页面中定义一个存放加载内容的标签 <%@ page contentType="text/html;charset=UTF-8" ...
  • 概述后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件。 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加载的树状表格~1. 使用...
  • -%> 退出 坐席 <%----%> <%-- --%> 后台管理 关闭当前标签页 关闭其它标签页 关闭全部标签页 接口:business/businessUser/getMenuList 的返回结构为:BusinessMenuPo /** * 名称 */ private String name;...
  • Asp.net layui重新加载当前页面

    千次阅读 2018-07-09 15:26:18
    重新加载当前页面 $('#userInformation').on('click', function () { layer.open({ type: 2, title: '个人中心', area: ['900px', '815px'], ...
  • 今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 之前创建、删除数据库,在导入数据后,出现加载数据量过大的提示信息。不确定原因,查看了进程列表,但是无从下手解决。终于填坑:关闭事件调节器。创建一个叫[employees]的数据库:create database employees;显示...
  • var logif = layer.load(); var logif = layer.load(1);//换风格 var logif = layer.load(2,{time:10*1000});//换种风格,并且等待时间为10秒 layer.close(logif);//关闭加载
  • layui中使用方法如下:以表格为例,每次加载表格数据时加一个loading &lt;link rel="stylesheet" href="../layui/css/layui.css" /&gt; &lt;script type="text/javascri.....
  • 思路 手动拼接option,然后使用form.render()...加载数据前禁用select并显示“加载中...”,加载完成(异步)后取消禁用select,并重新渲染。 代码 showAddLayer(); // 显示添加用户弹出层 function show...
  • layui设置请求加载旋转等待

    千次阅读 2020-03-30 17:29:45
    layui请求旋转等待 上图为layui旋转加载等待样式 // 调用上传方法 beforeSend: function () { i=showLoad(); }, // 上传等待 function showLoad() { ...
  • layui 加载loding图标

    2020-06-30 15:16:40
    bProcessing:开启处理中的加载 sProcessing:页面加载数据显示具体信息 function getDataTable(){ $('#InsectDataTable').dataTable({ 'bProcessing': true,//是否显示,处理中.... 'bServerSide': true, '...
  • table.render 中增加 done:function () { layer.close(index) //加载完数据 } 详细代码如下: &amp;lt;script&amp;gt; layui.use(['layer','table','form'],function () { var layer = layui.layer; ...
  • LayUI加载js无效问题

    千次阅读 2017-07-07 10:27:00
    在部署系统的时候,本地调试一切正常,layer.js均能正常加载。然而部署到服务器之后,经常性的出现layer.js无法加载问题。导致页面弹框无法使用。 一开始以为是Google浏览器问题,因为刚刚更新过Google浏览器,...
  • 读完本文您将了解到:layui的滚动流加载,手动流加载,以及图片的懒加载。 滚动加载:拖动右边的滚动条,即可获取新的数据 手动加载:点击【加载更多】,即可获取新的数据 图片懒加载:始终加载当前屏的图片,减轻...
  • layui上传文件loading加载动画

    千次阅读 2020-06-10 12:22:31
    jquery layui 开始请求打开layui加载动画 所有请求结束后关闭layui加载动画 ajaxSetup() 方法为将来的 AJAX 请求设置默认值。 $.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 <span ...
  • layui的弹窗加载使用

    2018-11-12 17:16:00
    有三种加载的图案 第一种是默认的: layer.load(); 第二种就是圆圈转的 layer.load(1); 第三种: layer.load(2, {time: 10*1000}); 转载于:...
  • ,done: function (res, curr, count) { $('.layui-laypage > a').on('click',function () { layer.load(2, { time: 0 ,shade: 0.3}) });//给分页按钮增加点击事件 l...
  • function ser_on(){ var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); TB.reload({ ...//关闭最后一个加载层 layer.close(index);//关闭指定加载层 }, ... }) }  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,276
精华内容 910
关键字:

layui关闭加载