easyui中datagrid列表当前页数据量小于pageSize时会显示一片空白区域，影响页面美观性（图一），我们可以用空数据行填充以补齐空白（图二）。
图一
图二
填充方法有很多，下面介绍一种个人认为比较简单的直接操作dom填充方式。
扩展datagrid方法：
1 $.extend($.fn.datagrid.methods, {
2
3 /**
4 * 增加空行 用于没有数据或者数据不足以填满整个列表
5 * @param jq datagrid对象
6 */
7 fillRows: function (jq) {
8 var datacounts = 10; //填充总数
9 var grid = $(jq);
10 var pageopt = grid.datagrid(‘getPager‘).data("pagination").options;
11 var pageSize = pageopt.pageSize;
12 var rows = grid.datagrid("getRows");
13 var length = rows.length;
14
15 if (pageSize >= datacounts && length < datacounts) {
16 var options = grid.datagrid("options");
17 var gpanel = grid.datagrid("getPanel");
18 var gbody1 = gpanel.find(".datagrid-view1 .datagrid-body");
19 var tbody1 = gbody1.find("table>tbody");
20 var gbody2 = gpanel.find(".datagrid-view2 .datagrid-body");
21 var tbody2 = gbody2.find("table>tbody");
22
23 var column1s = grid.datagrid("getColumnFields",true);
24 var column2s = grid.datagrid("getColumnFields");
25 var td1s = "";
26 var td2s = "";
27
28
29 if(tbody1.length > 0){
30 td1s += options.rownumbers ? "<td class=‘datagrid-td-rownumber‘></td>":"";
31
32 if(column1s.length > 0){
33 $.each(column1s,function(i,field){
34 var opt = grid.datagrid("getColumnOption",field);
35 if(opt != null && !opt.hidden){
36 td1s +="<td field=\""+field+"\"></td>";
37 }
38 });
39 }
40 var events = $._data(gbody1.children().get(0),‘events‘);
41 if(events != null){
42 //重新绑定click、dblclick事件
43 var clickfunc = events.click[0].handler;
44 events.click[0].handler = function(e){
45 var tt=$(e.target);
46 var tr=tt.closest("tr.datagrid-row");
47 if(tr.hasClass("datagrid-blank-row")){
48 return;
49 }
50 clickfunc(e);
51 };
52 var dblclickfunc = events.dblclick[0].handler;
53 events.dblclick[0].handler = function(e){
54 var tt=$(e.target);
55 var tr=tt.closest("tr.datagrid-row");
56 if(tr.hasClass("datagrid-blank-row")){
57 return;
58 }
59 dblclickfunc(e);
60 };
61 }
62 }
63 if(tbody2.length > 0 && column2s.length > 0){
64 $.each(column2s,function(i,field){
65 var opt = grid.datagrid("getColumnOption",field);
66 if(opt != null && !opt.hidden){
67 td2s +="<td field=\""+field+"\"></td>";
68 }
69 });
70
71 var events = $._data(gbody2.get(0),‘events‘);
72 if(events != null){
73 //重新绑定click、dblclick事件
74 var clickfunc = events.click[0].handler;
75 events.click[0].handler = function(e){
76 var tt=$(e.target);
77 var tr=tt.closest("tr.datagrid-row");
78 if(tr.hasClass("datagrid-blank-row")){
79 return;
80 }
81 clickfunc(e);
82 };
83 var dblclickfunc = events.dblclick[0].handler;
84 events.dblclick[0].handler = function(e){
85 var tt=$(e.target);
86 var tr=tt.closest("tr.datagrid-row");
87 if(tr.hasClass("datagrid-blank-row")){
88 return;
89 }
90 dblclickfunc(e);
91 };
92 }
93 }
94 for (var i = length; i < datacounts; i++) {
95 if(td1s != ""){
96 var tr = ‘<tr class="datagrid-blank-row datagrid-row‘
97 + (options.striped && i % 2 != 0 ? ‘ datagrid-row-alt‘ : ‘‘) + ‘">‘ + td1s + ‘</tr>‘;
98 $(tr).appendTo(tbody1);
99 }
100 if(td2s != ""){
101 var tr = ‘<tr class="datagrid-blank-row datagrid-row‘
102 + (options.striped && i % 2 != 0 ? ‘ datagrid-row-alt‘ : ‘‘) + ‘">‘ + td2s + ‘</tr>‘;
103 $(tr).appendTo(tbody2);
104 }
105 }
106 }
107 }
108 });
调用比较简单，直接在onLoadSuccess事件里调用即可，不必修改onSelect、onCheck等事件，不影响列头排序等功能。
调用：
1 $("#dgId").datagrid({
2 //.....
3 // other options
4 //....
5 onLoadSuccess : function(data) {
6 $(this).datagrid("fillRows");
7 }
8 }
原文：http://www.cnblogs.com/jlunzi/p/6652554.html