easyUI datagrid view扩展

最新推荐文章于 2023-05-05 08:41:59 发布

转载最新推荐文章于 2023-05-05 08:41:59 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hujiapeng/p/4489408.html

文章标签：

#javascript #ViewUI

本文介绍了一种扩展EasyUI Datagrid的方法，当数据为空时，可以自定义显示界面，包括消息提示和界面元素的隐藏，通过简单的代码实现更友好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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 });