实现easyui 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: '<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":[]}
实现easyui datagrid在没有数据时显示相关提示内容的更多相关文章
- easy ui datagrid在没有数据时显示相关提示内容
$(function () { $('#dg').datagrid({ fitColumns: true, url: 'product.json', pagination: true, pageSiz ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
- Easyui datagrid加载数据时默认全选的问题
问题描述: 最近使用 Easyui datagrid 展示数据,之前一直使用很正常,今天出现了一个怪异问题 加载数据后,只要点击选中列 ck 的任意行或多行,再刷新时整个datagrid的所有数据都 ...
- easyui datagrid 每条数据后添加操作按钮
easyui datagrid 每条数据后添加“编辑.查看.删除”按钮 1.给datagrid添加操作字段:字段值 <table class="easyui-datagrid" ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- EasyUI + ajax + treegrid/datagrid 接收 json 数据,显示树状/网状表结构
最后一更了,时间间隔有点久了~~ EasyUI作为一个成熟的前端框架,封装了ajax,对于数据的处理配合datagrid组件的使用,使其非常适合后台管理界面的开发(目前来说界面有点过时了). 通过aj ...
- jquery easyui datagrid 将值作为img显示图片时报404 undefined
原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {} value = undefined index = 0 进行一次渲染, 在没有formater情况将数据 ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- 扩展:gridview 空数据时显示表头
2015年7月14日16:50:06 Gridview 默认展示数据时,若数据为空,则表格不显示,显示不美观. 针对此问题进行扩展: using System.Web.UI.WebControls; ...
随机推荐
- js两个小技巧【看到了就记录一下】
1.不声明第三个变量实现交换 ,b=; a=[b,b=a][];//执行完这句代码之后 a的值为2 b的值为1了 2.&&和||的用法 (学会了立马感觉高大尚了吧) ; //传统if语 ...
- Leetcode Unique Binary Search Trees
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- ACM 擅长排列的小明
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- 关于NSNotificationCenter消息通信用法
NSNotificationCenter主要用于广播消息到多个监听着,其传统用法 - (void)viewDidLoad { [super viewDidLoad]; [[NSNotification ...
- 总结新系统部署时,Oracle的一些注意事项:
1.Oracle安装时,要选择字符集为中文编码,数据库重要角色设置密码时,不要用数字开头,不然后面会报一些错误提示 2.emp导出的数据dmp格式,导入时要在服务器导入,具体没有试,要找机会试试,转化 ...
- 初识WebSocket
众所周知,Http协议是无状态的,并且是基于Request/Response的方式与服务器进行交互,也就是我们常说的单工模式.但是随着互联 网的发展,浏览器与服务端进行双向通信需求的增加,长轮询向服务 ...
- Spring MVC和Struts2的比较(二)
1.Spring MVC的controller+command object模式比Struts2的Action模式更安全一些.而在Struts2中,自动数据绑定发生在Action对象上.这样,在Act ...
- 队列 Soldier and Cards
Soldier and Cards 题目: Description Two bored soldiers are playing card war. Their card deck consists ...
- [CareerCup] 17.11 Rand7 and Rand5 随机生成数字
17.11 Implement a method rand7() given rand5(). That is, given a method that generates a random numb ...
- rdp爆破工具 Fast RDP Brute
http://stascorp.com/load/1-1-0-58 Fast RDP Brute dservers.ru/wp-content/uploads/2013/11/frdpb2.zip