实现easyui datagrid在没有数据时显示相关提示内容-阿里云开发者社区

开发者社区> 老朱第一> 正文

实现easyui datagrid在没有数据时显示相关提示内容

简介:
+关注继续查看

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

 

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

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

  1. 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的。
  2. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系。

  源代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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":[]}

 



本文转自yonghu86博客园博客,原文链接:http://www.cnblogs.com/huyong/p/4896958.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【1026 - 1030直播导视 | PPT 下载】阿里专家直播:EasyTransfer平台应用实践、大数据+AI meetup 2020第二季·上海场来啦!
本周为大家带来了8场技术公开课,技术学习实践两不误!开源日迎来第六期啦线上对话阿里云专家:为大家带来EasyTransfer平台应用实践;大数据+AI meetup上海专场来啦!大家快办好小板凳坐等下周技术专场吧!
3454 0
为什么往dataGridView中添加数据会多一行
1、案例代码 this.dataGridView1.Rows.Clear(); if (Get_One_User(Convert.
730 0
SAS学习笔记之《SAS编程与数据挖掘商业案例》(2)数据获取与数据集操作
SAS学习笔记之《SAS编程与数据挖掘商业案例》(2)数据获取与数据集操作 1. SET/SET效率高,建立的主表和建表索引的查询表一般不排序, 2. BY语句,DATA步中,BY语句规定分组变量,用于控制SET,MERGE,UPDATE或MODIFY语句。 BY&lt;DESCENDING&gt;variable-1 &lt;...&lt;DESCENDI
1381 0
关于mp3实时显示音频音柱或者波形的提问
看到不少关于mp3实时显示音频音柱或者波形的提问所以在这里整理一下有关知识.AS3中提供了一个新的类SoundMixer我们需要用的是其中的computeSpectrum(outputArray:ByteArray, FFTMode:Boolean = false, stretchFactor:in...
672 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1083 0
【最佳实践】使用 Elasticsearch SQL 实现数据查询
如何使用 Elasticsearch SQL 来对我们的数据进行查询。
2344 0
如何将DataGridView中的滚动条显示出来
1、选项设置   DataGridView有一个ScrollBars,可以设置水平滚动条,垂直滚动条,或者两种包含。   2、实际运行效果
1655 0
+关注
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载