easyui datagrid无数据时显示无数据

需求

使用datagrid显示记录时，结果查询记录数为0，此时需要显示无数据。

示例代码

<table id="dg"></table>

$('#dg').datagrid({url:'datagrid_data.json',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]
});

当url查询无数据时，显示无数据。

解决办法

重新定义view视图

var noDataView = $.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" style="background-color: #f3f3f3;"></div>').html(opts.emptyMsg || 'no data').appendTo(vc);d.css({position: 'absolute',left: 0,top: 20,width: '100%',textAlign: 'center'});}}});

使用该视图

$('#dg').datagrid({url:'datagrid_data.json',view: noDataView,emptyMsg:'没有记录',columns:[[{field:'code',title:'Code',width:100},{field:'name',title:'Name',width:100},{field:'price',title:'Price',width:100,align:'right'}]]});