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


Posted in Javascript onJuly 09, 2016

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

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

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

jQuery Easyui学习教程之实现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: '<div style="text-align:center;color:red">没有相关记录!</div>' }).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('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂无数据</h1></td></tr>');
  }
}
Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JS伪继承prototype实现方法示例
Jun 20 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
JS添加删除DIV的简单实例
Jul 08 #Javascript
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
利用python获得时间的实例说明
2013/03/25 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python中logging日志库实例详解
2020/02/19 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
毕业生多媒体设计求职信
2013/10/12 职场文书
教师学习培训邀请函
2014/02/04 职场文书
安全生产演讲稿
2014/05/09 职场文书
大型演出策划方案
2014/05/28 职场文书
公司合作协议范文
2014/10/01 职场文书
党员倡议书
2015/01/19 职场文书
归元寺导游词
2015/02/06 职场文书
稽核岗位职责范本
2015/04/13 职场文书
学生会主席任命书
2015/09/21 职场文书
商业计划书之服装
2019/09/09 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python