easyUI datagrid view扩展

 1 //扩展easyuidatagrid无数据时显示界面
 2 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, {
 3     onAfterRender: function (target) {
 4         $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
 5         var opts = $(target).datagrid(‘options‘);
 6         var vc = $(target).datagrid(‘getPanel‘).children(‘div.datagrid-view‘);
 7         if (opts.rownumbers) {
 8             vc.children(‘div.datagrid-view1‘).css(‘display‘, ‘block‘);
 9         }
10         if (opts.showFooter) {
11             vc.children(‘div.datagrid-view2‘).children(‘div.datagrid-footer‘).css(‘display‘, ‘block‘);
12         }
13         vc.children(‘div.datagrid-empty‘).remove();
14         if (!$(target).datagrid(‘getRows‘).length) {
15             var d = $(‘<div class="datagrid-empty"></div>‘).html(opts.emptyMsg || ‘no records‘).appendTo(vc);
16             vc.children(‘div.datagrid-view1‘).css(‘display‘, ‘none‘);
17             vc.children(‘div.datagrid-view2‘).children(‘div.datagrid-footer‘).css(‘display‘, ‘none‘);
18         }
19     }
20 });

初始化datagrid时，加上

view:emptyView,
emptyMsg:"暂无相关数据",

即可