easyui datagrid无数据时显示无数据

这里写自定义目录标题

需求

使用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'}
        ]]
    });
相关推荐
石金龙10 分钟前
[译] Composition in CSS
前端·css
白水清风13 分钟前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix25 分钟前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780025 分钟前
new、原型和原型链浅析
前端·javascript
阿星做前端25 分钟前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧25 分钟前
Promise 的使用
前端·javascript
NBtab43 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码1 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
libraG2 小时前
Jenkins打包问题
前端·npm·jenkins