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，在这里就不过多介绍啦。