easyUI datagrid表格添加“暂无记录”显示

扩展grid的onAfterRender事件

var myview = $.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"></div>').html("暂无记录").appendTo(vc);

            d.css({

                marginTop: 28,

                width: '100%',

                textAlign: 'center',

                fontSize: 14

            });

            vc.css({

                minHeight: 50

            });

        }

    }

});

 

应用：

//使用

$('#dgReason').datagrid({

                width: 580,

                view: myview,

                columns: [

                    [

                        { field: 'firstReason', title: '一级原因', width: 200, align: 'center' },

                        { field: 'secondReason', title: '二级原因', width: 250 },

                        { field: 'lockDays', title: '锁定天数', width: 100, align: 'center' },

                        { field: 'code', hidden: true }

                    ]

                ],

                rownumbers: true,

                loadMsg: "数据加载中...."

            });