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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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
ThinkPHP分页实例
2014/10/15 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
JS 继承实例分析
2008/11/04 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
python中list常用操作实例详解
2015/06/03 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
业绩考核岗位职责
2014/02/01 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
综合测评个人总结
2015/03/03 职场文书
工作后的感想
2015/08/07 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers