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