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'}
        ]]
    });
相关推荐
heartmoonq6 分钟前
npm 包抽象封装并发布完整指南
前端
红衣信6 分钟前
深入剖析 hooks-todos 项目:前端开发的实用实践
前端·react.js·面试
今禾6 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter6 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Spider_Man10 分钟前
🎭 React受控与非受控组件:一场"控制权"的争夺战
前端·react.js
Mintopia15 分钟前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学
黑客老李17 分钟前
EDUSRC:智慧校园通用漏洞挖掘(涉校园解决方案商)
服务器·前端·网络·安全·web安全
Code季风17 分钟前
SQL关键字快速入门:CASE 实现条件逻辑
javascript·数据库·sql
拾光拾趣录18 分钟前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia19 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js