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'}
        ]]
    });
相关推荐
速易达网络9 分钟前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou11 分钟前
js前端this指向规则
开发语言·前端·javascript
lichong95112 分钟前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer12 分钟前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong95114 分钟前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马44 分钟前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱1 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌1 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静2 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿2 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端