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

最新推荐文章于 2025-03-04 15:14:13 发布

hush_Pc

最新推荐文章于 2025-03-04 15:14:13 发布

阅读量6k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42715209/article/details/88402181

版权

该博客介绍了如何在layui数据表格中实现加载等待进度条的功能。提供了具体的代码示例，通过添加特定方法来展示加载进度，帮助用户提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码：

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);     
}