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'}
        ]]
    });