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