easyui datagrid无数据时显示无数据

一路向北North2024-01-10 9:25

这里写自定义目录标题

需求
解决办法

需求

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

示例代码

html 复制代码

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

js 复制代码

$('#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视图

js 复制代码

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

使用该视图

js 复制代码

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