美文网首页
layui数据表格显示加载等待进度

layui数据表格显示加载等待进度

作者: Hush____ | 来源:发表于2018-12-18 17:23 被阅读22次

    示例代码:

    layui.use([ 'form', 'table'], function() {
        var table = layui.table, form = layui.form, $ = layui.$;
        var index = layer.load(1);
        table.render({
            elem: '#tableData',
            url: basePath + '/mainTab/selectDataByType?breakRawType=' + $("#breakRawType").val() + "&ah=" + $("#ah").val() + "&wfzt=" + $("#wfzt").val(),
            request: {
                pageName: 'page', //页码的参数名称,默认:page
                limitName: 'rows' //每页数据量的参数名,默认:limit
            },
    //          cellMinWidth: 100,
            cols : [[  // 表头
                {
                    field : 'ah',
                    title : '案号',
                    align : 'center',
                    width : '23%',
                    event : 'seeDetail',
                    style: 'cursor: pointer;color:#0000CC;',
                    sort : true
                },{
                    field : 'wfzt',
                    title : '违法主体',
                    width : '20%',
                    align : "center"
    //              sort : true
                }]],
            skin: 'row', //表格风格
            even: true, //隔行背景
            page :true,
            limits: [30, 50, 100], //显示
            limit: 30, //每页默认显示的数量
            id:'tableReload',
            done : function(res, curr, count){
                    //太长title 提示
                    $("tr td").hover(function() {
                        $(this).attr("title", $(this).text());
                    }, function() {
                        $(this).removeAttr("title");
                    });
                layer.close(index);    //返回数据关闭loading
            }
        });
    });
    

    主要添加:

    var index = layer.load(1); 
    
    ,done:function (res) {   //返回数据执行回调函数
       layer.close(index);    //返回数据关闭loading
    }
    

    ⚠️附:
    通过方法添加的加载进度条展示,参考代码如下:

    function showLoad() {
       return layer.msg('拼命执行中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:100000});   
    }
        
    function closeLoad(index) {
       layer.close(index);     
    }
    

    相关文章

      网友评论

          本文标题:layui数据表格显示加载等待进度

          本文链接:https://www.haomeiwen.com/subject/rlmlkqtx.html