热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQueryEasyui学习教程之实现datagrid在没有数据时显示相关提示内容

本篇文章给大家介绍easyuidatagrid加载查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示

  本实例要实现如下图所示的效果:

  本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本

不同版本对appendRow和mergeCells支持不一样,参数不一致什么的。

无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系。

  源代码如下

$(function () { 
$('#dg').datagrid({ 
fitColumns: true, 
url: 'product.json', 
pagination: true, 
pageSize: 3, 
onLoadSuccess: function (data) { 
if (data.total == 0) { 
//添加一个新数据行,第一列的值为你需要的提示信息,然后将其他列合并到第一列来,注意修改colspan参数为你columns配置的总列数 
$(this).datagrid('appendRow', { itemid: '
没有相关记录!
' }).datagrid('mergeCells', { index: 0, field: 'itemid', colspan: 4 }) //隐藏分页导航条,这个需要熟悉datagrid的html结构,直接用jquery操作DOM对象,easyui datagrid没有提供相关方法隐藏导航条 $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide(); } //如果通过调用reload方法重新加载数据有数据时显示出分页导航容器 else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show(); }, title: 'easyui datagrid没有数据显示无数据提示信息', width: 550, columns: [[{ field: 'itemid', width: 80, title: 'Item ID' }, { field: 'productname', width: 100, editor: 'text', title: 'Product Name' }, { field: 'listprice', width: 80, align: 'right', title: 'List Pirce' }, { field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'}]] }); }); product.json {"total":0,"rows":[]}

以上所述是小编给大家介绍的jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容的全部叙述,希望对大家有所帮助,如果大家有任何问题欢迎给我留言,小编会及时回复大家的!

下面给大家介绍 jQuery EasyUI datagrid 无记录时,增加"暂无数据"提示

 在 datagrid 的onLoadSuccess事件进行操作:

onLoadSuccess: function (data) {
  if (data.total == 0) {
    var body = $(this).data().datagrid.dc.body2;
    body.find('table tbody').append('

暂无数据

'); } }

推荐阅读
  • from:http:www.myquickphp.comarchives147(请求的跨域服务器不支持常规”?”查询请求时的解决方案)昨天第一次做VIP需求时,发现一 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 为了满足专业设计师的需求,我需要一个工具,能够将使用JQuery构建的动态页面转换为纯静态HTML,而无需引用任何JavaScript文件。该工具应具备模拟当前页面的功能,以确保在开发和测试过程中保持页面的完整性和一致性。此外,该工具还应支持高效的页面调试和优化,以便设计师能够快速验证和调整页面布局及样式。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • 尝试在数据库中查询数据并在datatables中异步显示时总是报错。有人帮我看下吗,好像是这个json的格式出问题,我看了firebug,应该是servlet返回的json数据格式问题,但因为新 ... [详细]
  • Thisquestionalreadyhasananswerhere:这个问题已经有了答案:HowcanIdisplayaJavaScriptobje ... [详细]
  • 首先,我有点像jQuerynoob和整个PHPnoob,所以如果这是一个愚蠢的问题,我感到很抱歉(尽管我已经搜索了Internet,尤其是这个网站的上下无法弄清我的意思.错了).另 ... [详细]
author-avatar
_Terr1鄭x宜_F
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有