当easyui datagrid无数据时，显示特定值。如：没有数据

最新推荐文章于 2019-03-18 16:55:54 发布
最新推荐文章于 2019-03-18 16:55:54 发布
阅读量3.9k 收藏
点赞数
分类专栏： 前台
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "UTF-8" >
     < title >Basic DataGrid - jQuery EasyUI Demo</ title >
     < link  rel = "stylesheet"  type = "text/css"  href = "../../themes/default/easyui.css" >
     < link  rel = "stylesheet"  type = "text/css"  href = "../../themes/icon.css" >
     < link  rel = "stylesheet"  type = "text/css"  href = "../demo.css" >
     < script  type = "text/javascript"  src = "../../jquery-1.8.0.min.js" ></ script >
     < script  type = "text/javascript"  src = "../../jquery.easyui.min.js" ></ script >
     < script >
     var myview = $.extend({},$.fn.datagrid.defaults.view,{
     onAfterRender:function(target){
         $.fn.datagrid.defaults.view.onAfterRender.call(this,target);
         var opts = $(target).datagrid('options');
         var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
         vc.children('div.datagrid-empty').remove();
         if (!$(target).datagrid('getRows').length){
             var d = $('< div  class = "datagrid-empty" ></ div >').html(opts.emptyMsg || 'no records').appendTo(vc);
             d.css({
                 position:'absolute',
                 left:0,
                 top:50,
                 width:'100%',
                 textAlign:'center'
             });
         }
     }
     });
     $(function(){
         var list=[];//数据列表为空
     
         $('#dg').datagrid({
               data: list,
             view: myview,
               emptyMsg: 'no records found'
   
         });
     })
     </ script >
</ head >
< body >
     < h2 >Basic DataGrid</ h2 >
     < div  class = "demo-info" >
         < div  class = "demo-tip icon-tip" ></ div >
         < div >The DataGrid is created from markup, no JavaScript code needed.</ div >
     </ div >
     < div  style = "margin:10px 0;" ></ div >
     
      < table  id = "dg"  title = "Surveys"  class = "easyui-datagrid"  style = "width:550px;height:250px"   toolbar = "#toolbar"   rownumbers = "true"  fitColumns = "true"  singleSelect = "true" >  
   < thead >  
     < tr >  
         < th  field = "id"  width = "20" >Id</ th >  
         < th  field = "name"  width = "50" >Name</ th >  
         < th  field = "number"  width = "50" >Number</ th >  
         < th  field = "description"  width = "50" >Description</ th >  
     </ tr >  
   </ thead >  
  </ table >
 
</ body >
</ html >
yyongsheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
EasyUI Datagrid 数据网格
qq_43710927的博客
09-28 656
EasyUI Datagrid 数据网格的简单使用
easyui datagrid无数据时显示无数据
最新发布
不积跬步，无以至千里
01-09 937
使用datagrid显示记录时，结果查询记录数为0，此时需要显示无数据。当url查询无数据时，显示无数据。重新定义view视图。
扩展当easyui datagrid无数据时，显示特定值。如：没有数据
dingqi1722的博客
11-30 137
1 var myview = $.extend({},$.fn.datagrid.defaults.view,{ 2 onAfterRender:function(target){ 3 $.fn.datagrid.defaults.view.onAfterRender.call(this,target); 4 var opts =...
easyui datagrid 无数据信息提示
snow1wolf的专栏
10-15 3284
AfrikaansAlbanianArabic ArmenianAzerbaijaniBasque BelarusianBulgarian CatalanChinese (Simplified) Chinese (Traditional)Croatian CzechDanish Detect languageDutchEnglish EstonianFilipino Finnish
扩展当easyui datagrid无数据时，显示特定值。如：没有数据 ----转载
ading0210的博客
10-24 230
var myview = $.extend({},$.fn.datagrid.defaults.view,{ onAfterRender:function(target){ $.fn.datagrid.defaults.view.onAfterRender.call(this,target); var opts = $(target).d...
easyui中datagrid 不显示数据
lh140614的专栏
03-18 2313
之前并没有系统使用easyui组件的机会。本次也是在基于该前端框架下完成一个简单的查询功能并展示的问题。 datagrid即数据网格，用于展示列表数据，以行为单位且支持分页。 问题背景：根据查询参数查询符合条件的数据。前端使用easyUI，后端使用spring mvc。 然而根据条件查询只会返回一条数据，因此也没有考虑分页什么的。 现象：后台以JSON格式返回，键值与前端的field的名称...
EasyUI的DataGrid绑定Json数据源的示例代码
10-18
当需要在EasyUI的DataGrid中绑定Json数据源时，可以通过编写JavaScript代码实现。Json数据源是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。在Web应用中，Json数据经常作为前后端交互的数据...
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
11-22
title: 'easyui datagrid没有数据显示无数据提示信息', width: 550, columns: [ [{ field: 'itemid', width: 80, title: 'Item ID' }, { field: 'productname', width: 100, editor: 'text', title: 'Product ...
EasyUI可扩展Editable DataGrid（可编辑数据表格）
08-10
标题 "EasyUI可扩展Editable DataGrid（可编辑数据表格）" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架，它提供了一系列预定义的CSS样式和...
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
10-21
EasyUI的一个重要组件是datagrid，它是一个数据表格控件，可以显示多行多列的数据，并允许对这些数据进行操作和管理。有时候，为了满足特定的业务需求，在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。...
datagrid返回记录为0时显示“没有记录”
s361299706的博客
08-24 524
datagrid返回记录为0时显示“没有记录” 分类：扩展发表于 2013-11-27 18:06 , 已有7093次阅读 datagrid返回记录为0时显示“没有记录”，此问题的解决方案是扩展默认view视图。如下： 01 02 var myview = $.extend({},$.fn.datagrid.defa
datagrid没有数据显示无数据提示信息
BIGPIG个人笔记
10-24 7225
$('#tt').datagrid({ width: document.getElementById('div1').width, height: document.getElementById('div1').heigh, nowrap: false, striped: true, collapsible: true, remoteSort: fa
easy UI datagrid加载的时候默认不加载数据
weixin_34115824的博客
06-17 696
2019独角兽企业重金招聘Python工程师标准>>> ...
easyui datagrid列使用按钮
颠沛流离的青春〃--ゞ沫小陌ぴ
06-26 913
之前的方法，只能显示成问题，不能显示按钮。$('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns:[[ {field:'projectname',title:'应用名',width:80},
easyui datagrid列使用按钮的一些心得（转）
weixin_33695082的博客
05-11 84
http://blog.csdn.net/sskicgah/article/details/16939959 以前，用easyui的datagrid，有时候会用到一些操作选项，比如代码如下： [javascript]view plaincopy $('#datagrid').datagrid({ border:false, fitCol...
easyui datagrid中自定义按钮列
热门推荐
wilson_m的博客
06-29 1万+
在多数时候我们要在表格的某一列（通常是最后一列）作为操作列。 前台datagrid代码如下 &amp;lt;table id=&quot;dg&quot; title=&quot;三农快讯&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:auto;height:100%&quot; toolbar=&quot;#toolbar&q
jquery-easyui中列表控件datagrid没有数据时显示列表为空信息
feinifi的博客
12-24 3430
jquery-easyui控件datagrid下，如果有数据，会显示按照列表显示，如果没有数据，那么会显示如下的界面。没有任何提示。 为了让没有数据的情况下，提示“列表为空”，我们需要设置datagrid属性。这个属性就是emptyMsg。默认情况下，这个属性是为空，没有值。 当我们设置了emptyMsg这个之后，列表页面仍然不会显示，这个应该是easyui的一个bug。 通过控...
EasyUI 之 DataGrid的两种赋值方法
书写人生
09-28 1万+
方法一：使用ViewData赋值         首先，我们创建一个User的实体类 [csharp] view plain copy print? public class User      {          public string UserID;              public string UserName;          
jQuery EasyUI DataGrid：单击编辑并自动保存单元格数据
在本文档中，主要讨论的是如何使用jQuery EasyUI DataGrid实现点击单元格即可进入编辑状态，并在焦点移出后自动保存数据的功能。作者提供了具体的代码示例来演示这一过程。 首先，我们看到`InitGrid`函数是初始化...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值