美文网首页
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