EasyUI——datagrid 的onLoadSuccess事件无数据时提示“没有相关记录”——给用户更好的视觉效果

    在做旧框架ITOO时,就遇到了一个问题,就是datagrid加载无数据时给用户一个“没有相关记录”的提示。后来由于一些原因,一直没有实现。从旧框架,带到了新框架,还是要解决的,对吧?

这是我想要的效果:


    在这里遇到了不少的问题,咱们先一个一个的说。如果瞎猫碰死耗子,解决了你的问题。我将不胜荣幸。


datagrid的onLoadSuccess事件我们可能都不陌生。使用方法如下:

$('#dg').datagrid({
		url:'query',
		onLoadSuccess:function(data){
			//要判断或者执行的代码
		},
	});

url:'query'方法直接调用后台方法执行查询即可。function(data),参数data就是查询出的内容。

在项目中我是分页查询,写的js方法如下:

$('#dg').datagrid({
		url:'query’,
		onLoadSuccess:function(data){
		if(data==null||data.total ==0){
		$('#dgApply').datagrid('appendRow',
				{
					TypeName:'<div style="text-align:center;color:red">没有相关记录!</div>',
					rownumbers : false
			//合并单元格
				}).datagrid('mergeCells',{
					index : 0,
					field : 'TypeName',
					colspan : 5
				})
				//隐藏分页导航条
				$('#dgApply').closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
	}
	else{
		$('#dgApply').closest('div.datagrid-wrap').find('div.datagrid-pager').show();
	}
		},
	});

在这里发现了一个问题,就是后台方法查询不到数据,即data=null的时候,是不执行onLoadSuccess事件的。data有数据时,onLoadsuccess事件可以执行。

如此看来,当后台数据返回为null的时候,datagrid是默认加载不成功的,故不执行onLoadSuccess事件。

那么,怎么解决呢??

在这里,我修改了一下后台方法。现在后台判断一下查询出数据的list的size,然后size>0,再执行转map的方法。如果查询出没有数据,则,在分页实体里直接settotal=0(注意js里面判断data条数的时候,用的是total),就好啦。代码如下:

if (list.size() > 0 && list != null) {
			listnew = objectToMap.convertToMap(fields, list);			
		}	
		pageEntity.setRows(listnew);
		long count=list.size();
		pageEntity.setTotal(count);
		return pageEntity;
这样执行js就没有问题了。


至于怎么样式怎么显示,大家可以去修改js,在这里就不过多介绍啦。

评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值