$(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'}]]
});
});

文章出处:http://www.cnblogs.com/huyong/p/4896958.html

easy ui datagrid在没有数据时显示相关提示内容的更多相关文章

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

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

  2. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  3. Jquery Easy UI Datagrid 上下移动批量保存数据

    DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...

  4. jquery Easy UI Datagrid(数据网格)学习心德,附API

    第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...

  5. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  6. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

  7. jquery easy ui 1.3.4 数据表格(DataGrid)(8)

    8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

  8. JQuery Easy Ui dataGrid 数据表格 -->转

    转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...

  9. easy ui datagrid 增,删,改,查等基本操作

    如下图: ①列表信息图 ②添加信息图 ③修改信息图 html代码: <%@ Page Title="" Language="C#" MasterPageF ...

随机推荐

  1. HttpClient(4.3.5) - HTTP Entity

    HTTP entity HTTP messages can carry a content entity associated with the request or response. Entiti ...

  2. CSS之鼠标经过字体光标形状的改变

    CSS中的cursor属性是规定要显示的光标的类型(形状). 参阅JavaScript正则表达式 default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光 ...

  3. Android之简单页面跳转

    Uri.parse方法返回的是一个URL类型,通过URL可以访问一个网络上的或者本地资源,Intent()方法是调用哪个组件来打开这个URL. package com.example.web; imp ...

  4. UIProgressView[进度条][一般型];UIStepper步数器][事件驱动型]

    ////  ViewController.m//  ProgressAndSteper////  Created by hehe on 15/9/21.//  Copyright (c) 2015年 ...

  5. MySQL的相关设置

    1.启动MySQL服务:#  service mysqld start 2.为MySQL设置root用户密码:# mysql -u root mysql>set password for roo ...

  6. DB Cache Reloaded Fix缓存不能被激活解决方法

    1.创建wp-content/plugins/db-cache-reloaded-fix/cache目录. 2.将cache权限改为777. 3.拷贝wp-content/plugins/db-cac ...

  7. javascript多线程简介

    讲多线程之前,我们先了解一下JS的事件机制 浏览器运行时,脚本必须定期让位给UI进程进行来维持网页的响应,闲置太长时间的脚本可能会被浏览器当成失控脚本,进而造成假死或弹窗 事件触发的设计javascr ...

  8. JavaScript jQuery 入门回顾 2

    JQuery 滑动 利用jQuery可以在元素上创建滑动效果. slideDown() 向下滑动元素. slideUp() 向上滑动元素. slideToggle() 在 slideDown() 与 ...

  9. java实现多模匹配算法

    这个是好几年前写的了.都统一放到cnblogs上面. --------------------------------Node ---------------------------------- p ...

  10. 前端工程模块化——以一个php项目为例

    实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...