jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示

这篇具有很好参考价值的文章主要介绍了jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、在onLoadSuccess中添加如下代码:
if (data.total == 0) {
                var body = $(this).data().datagrid.dc.body2;
                body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h5>暂无数据</h5></td></tr>');
            }

完整代码:

$('#tt').datagrid({
        url: null,
        pagination: true,
        pageNumber: 1,
        pageList: [15, 20, 50],
        rownumbers: true,
        fitColumns: false,
        singleSelect: true,
        columns: [[
            { field: 'Q_CODE', title: '指标编码', width: 100, align: 'left', halign: 'center' },
            { field: 'Q_NAME', title: '指标名称', width: 250, align: 'left', halign: 'center' },
            { field: 'REASON', title: '不启用理由', width: 250, align: 'left', halign: 'center' },
            {
                field: 'STATE', title: '审核状态', width: 80, align: 'left', halign: 'center', hidden: false,
                formatter: function (value, row, index) {
                    if (value == 0) return "待处理";
                    else if (value == 1) return "待审核";
                    else if (value == 2) return "已通过";
                    else if (value == 3) return "已驳回";
                }
            },
            { field: 'REJECT', title: '驳回说明', width: 250, align: 'left', halign: 'center' },
            {
                field: 'ID', title: '操作', width: 240, align: 'center', halign: 'center', hidden: false,
                formatter: function (value, row, index) {
                    var state = row.STATE;
                    if (state == 1) {
                        return '<a href="javascript:void(0);" οnclick="AuditFileConfig(\'' + row.ID + '\',\'' + " " + '\');">查看</a>' + '&nbsp;&nbsp;' + ' <a  href="javascript:void(0);"  οnclick="adopt(\'' + value + '\',\'' + row.Q_CODE + '\')">通过</a> ' + '&nbsp;&nbsp;' + ' <a  href="javascript:void(0);"  οnclick="rejectData(\'' + value + '\')">驳回</a>';
                    }
                    else {
                        return '<a href="javascript:void(0);" οnclick="AuditFileConfig(\'' + row.ID + '\',\'' + "" + '\')">查看</a>';
                    }
                }
            },
        ]],
        toolbar: '#tb',
        doPagination: function (pPageIndex, pPageSize) {
            Query(pPageIndex);
        },
        onLoadSuccess: function (data) {
            if (data.total == 0) {
                //$(this).data().datagrid.dc.body2 获取的是 DataGrid 组件的底层容器节点,body.width() 获取的是该容器的宽度值。不是在某个特定节点上调用 width() 方法
                var body = $(this).data().datagrid.dc.body2;
                body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h5>暂无数据</h5></td></tr>');
            }
        }
    });

如下图所示:
jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示,前端,JQuery,JQuery Easyui,jquery,easyui,前端文章来源地址https://www.toymoban.com/news/detail-651030.html

2、设置emptyMsg 属性,emptyMsg 属性是 EasyUI 的 DataGrid 组件从版本 1.5.4 开始引入的。这个属性用于设置在 DataGrid 没有数据时显示的提示信息。
  emptyMsg: '<h4>暂无数据</h4>',  // 设置暂无数据的提示信息

到了这里,关于jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序分页加载功能,结合后端实现上拉底部加载下一页数据,数据加载中和暂无数据提示

    🤵 作者 : coderYYY 🧑 个人简介 :前端程序媛,目前主攻 web前端 ,后端辅助,其他技术知识也会偶尔分享🍀欢迎和我一起交流!🚀(评论和私信一般会回!!) 👉 个人专栏推荐 :《前端项目教程以及代码》 项目开发中,如果请求后端数据过多,我们一般会进行分页处理

    2024年01月25日
    浏览(34)
  • EasyUI Jquery 学习笔记 —— Window(窗口)详细版

    通过 $.messager.defaults 重写默认的 defaults。 消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。 依赖 window linkbutton progressbar

    2024年04月15日
    浏览(39)
  • 基于Jquery EasyUI JSZip FileSaver的简单使用

    在前端的项目开发中 ,下载文件压缩包是很重要的一个环节,那么怎么下载多个文件并压缩成ZIP下载呢? 库下载地址:https://download.csdn.net/download/u012949335/88088658   

    2024年02月15日
    浏览(32)
  • 记录--前端使用a链接下载内容增加loading效果

    在尝试了使用 $nextTick、将 openDownloadDialog 改写成 Promise 异步函数,或者使用 async/await、在 openDownloadDialog 中添加 loadingSummaryData 逻辑,发现依旧无法解决问题,因此怀疑是 document 添加新元素与 vue 的 v-if 渲染产生冲突,即 document 添加新元素会阻塞 v-if 的执性。查阅资料发现,

    2024年02月10日
    浏览(37)
  • DedeCMS v5.5 无评论时提示“暂无评论”的实现方法

    修改方法: 1.打开plus/feedback_ajax.php文件 2.搜索:$allpage = ceil($totalcount / $pagesize); 回车 在下面加入代码: 以下为引用的内容: 解释:判断如果总页数小于1.(有评论都是≥1的)则提示“暂无评论”。怕有人不会修改,再附上修改好的代码示例,修改好的代码如下(红色为后加

    2024年02月02日
    浏览(37)
  • 云计算模式的区域LIS系统源码,基于ASP.NET+JQuery、EasyUI+MVC技术架构开发

    云计算模式的区域LIS系统源码 云LIS系统源码,自主版权 LIS系统 是专为医院检验科的仪器设备能与计算机连接。可通过LIS系统向仪器发送指令,让仪器自动操作和接收仪器数据。并快速的将检验仪器中的数据导入到医生工作站中进行管理,且可将检验结果发布到各个受检(门

    2024年02月08日
    浏览(43)
  • echarts 图表无数据/空数据 展示“暂无数据”

    我们从后端获取数据动态渲染图表时,难免会遇到数据为空的情况(虽然实际应用中这样的bug极少遇到),但考虑周全一点也好,看如何实现吧。  正常情况渲染图表: 我们只需要: 在定义option的外面加一个if条件判断,判断动态获取的数据是否有值,有则渲染图表,无则渲

    2024年02月06日
    浏览(32)
  • javaweb实验:JSP+JDBC综合实训_数据库记录的增加、查询

    JSP是一种基于Java的Web编程语言,可以生成动态的网页内容。JDBC是Java数据库连接的缩写,是一种用于访问数据库的标准API。通过使用JSP和JDBC,可以实现在网页上对数据库的操作,如增加、查询、修改和删除数据。本实验的目的是掌握使用JSP和JDBC完成数据库操作的基本方法,

    2024年02月07日
    浏览(55)
  • 分享一个基于easyui前端框架开发的后台管理系统模板

    这是博主自己在使用的一套easyui前端框架的后台管理系统模版,包含了后端的Java代码,已经实现了菜单控制、权限控制功能,可以直接拿来使用。 springboot + mybatis + mybatis-plus实现的增删查改完整项目,前端使用了easyui前端框架。 https://gitee.com/he-yunlin/easyui-crud.git 目录 功能介

    2024年01月19日
    浏览(53)
  • 前端UI工具(主要适用于JAVa,layui+easyui+elementui等及UI对比)

    前端开发中有许多流行的UI工具和框架,它们提供了丰富的组件、样式和功能,有助于加速界面开发。以下是一些常用的前端UI工具和框架: Bootstrap: 描述: Bootstrap 是一个开源的前端框架,提供了一套用于设计网站和Web应用的HTML、CSS和JavaScript组件。 特点: 响应式设计、移动

    2024年02月05日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包