layui表格初始化时加载提示信息

layui的表格在进行初始化时可以添加一个友好提示,增加用户体验,示例如下:

layui.use([‘form‘, ‘layer‘, ‘table‘], function() {
    var form = layui.form,
    table = layui.table;

    // 加载提示
    var loadingMsg = layer.msg(‘数据请求中...‘, {icon: 16,   shade: [0.5],   scrollbar: false,   time: 0});
    // 初始化表格及数据
    var tableIns = table.render({
            elem: ‘#tableList‘,
            url: ‘user/list‘, // 数据请求地址
            where: {
                    userName: $("#userName").val()
            },
            cellMinWidth: 95,
            toolbar: "#toolbarDemo", // 让工具栏左侧显示默认的内置模板
            defaultToolbar: [‘filter‘], // 工具栏右侧的图标按钮[‘filter‘, ‘print‘, ‘exports‘]
            even: true, // 开启斑马线效果
            page: true,
            // height : "full-125", //放置在页面底部
            limits: myLimits,
            limit: myLimit,
            id: "tableListTable",
            cols : [[
            {type:‘numbers‘, title: ‘序号‘},
            {type:‘radio‘, title: ‘单选‘},
            {field: ‘userId‘, title: ‘ID‘, width:100, align:"center", hide: true},
                    {field: ‘userName‘, title: ‘用户名‘, minWidth:150, align:"center"},
                    {field: ‘remark‘, title: ‘备注‘, align:"center"}
            ]],
            done: function(res, curr, count) {  /** 数据渲染完的回调 */
                    // 关闭提示层
                    layer.close(loadingMsg);
            }
    });
})

数据能正常请求,并返回结果时提示信息会关闭,但数据请求异常(例如地址错误)时,提示信息会一直显示,这个时候我们需要修改layui\lay\modules\table.js源码,找到"i.errorView("数据接口请求异常:"+t)",添加以下信息到前面即可在数据请求失败时也关闭提示信息 :

layer.close(layer.index); /** 关闭最新弹出层loadingMsg */

原文地址:https://blog.51cto.com/1197822/2473210

时间: 2024-10-27 12:12:01

layui表格初始化时加载提示信息的相关文章

JQuery/JS插件 jsTree加载树,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点

jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="plugins1"></div> <link

Spring将classpath下的 .properties文件数据读出放到map中,在初始化时加载

因为项目需要需要将配置文件中的键值对读出放到map中 格式为: 001=123456789 Appcontext.xml中添加配置: <bean id="loadKeyFromProperties" class="com.:landau.init.LoadKeyFormProperties"> <property name="keyFileResource"> <value>classpath:keys.pro

Android对第三方类库运行时加载

首先,把需要运行时加载的类库,放到项目的其他目录,如新建一个thirdlibs的目录.然后用dx命令,对下面的类库进行压缩,做成dex文件. dx --dex --output=../assets/ *.jar 这会在assets下面生成一个classes.dex文件,压缩成classes.zip文件. 新建一个类,用来加载类库 import java.io.File; import java.io.FileOutputStream; import java.io.FilenameFilter;

gg init load初始化直接加载

实例:从Oracle初始化数据到Sqlserver. 配置初始化数据抓取(direct load) 源端(oracle) 增加初始化加载batch task group add extract eini01,sourceistable 参数解析: #sourceistable表示从表direct抓取而不是redo日志获取数据. info extract *,tasks    #查看状态是STOPPED 配置初始加载进程eini01的参数 edit params eini01 extract ei

Android 首次进入应用时加载引导界面

功能需求:首次进入应用时加载引导界面 思路: 1.首次进入,怎么判断?查看SharedPreferences中某个字段 2.基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activity中加入判断,看是否需要跳转到引导Activity 3.引导界面,采用现在比较主流的方式:左右滑动加载:小圆点提示:在最后一个页面,点击button,进入功能界面 实现功能:左右手势滑屏 底部小圆点随当前显示页跳动 浮动按钮显示.当触屏事件发生显示,否则就渐渐消失 第一种: ViewFlipper

【Android】首次进入应用时加载引导界面

参考文章: [1]http://blog.csdn.net/wsscy2004/article/details/7611529 [2]http://www.androidlearner.net/android-use-viewflow-lift-right-slide.html 这个不同于上一篇文章[Android]每个Activity中加入引导界面 (每个Activity动态加载ImageView的方式).这个引导界面是在初次进入应用时,加载引导页面(采用Activity的方式),进入应用后,

android listview 滑动过程中不加载图片,停止时加载图片

今天闲来无事, 就测试了一下listview加载图片优化的功能, 在我们使用新浪微博的时候,细心的同学一定发现了,在滑动的过程中,图片是没有被加载的, 而是在滑动停止时,才加载图片了. 我们今天就做一个这样的效果吧. 我们先考虑两个问题: 1.在滑动停止的时候,如何获得需要加载的图片控件? 2.因为listiew在初始化完成的时候,OnScrollListener的onScrollStateChanged与onScroll并未被触发,如何初始化第一页的图片? package com.test.l

ElasticSearch 启动时加载 Analyzer 源码分析

ElasticSearch 启动时加载 Analyzer 源码分析 本文介绍 ElasticSearch启动时如何创建.加载Analyzer,主要的参考资料是Lucene中关于Analyzer官方文档介绍.ElasticSearch6.3.2源码中相关类:AnalysisModule.AnalysisPlugin.AnalyzerProvider.各种Tokenizer类和它们对应的TokenizerFactory.另外还参考了一个具体的基于ElasticSearch采用HanLP进行中文分词的

如何在运行时加载C++函数和类

如何在运行时加载C++函数和类 标签(空格分隔): 编程 Problem 有些时候你想在运行时加载一个lib或者function or class,这种事情经常发生在你开发一个plugin或者module时遇到. 在C语言里,你可以轻松的利用dlopen, dlsym, dlclose来做到,但是在C++的世界里却没那么简单了.困难就在C++语言的name mangling上,还有一部分就是dlopen函数是用纯C语言写的,不提供load classes功能. 在解析如何load functio