easyui中datagrid数据行不足时填补空白方法

　　easyui中datagrid列表当前页数据量小于pageSize时会显示一片空白区域，影响页面美观性（图一），我们可以用空数据行填充以补齐空白（图二）。

图一 

图二

　　填充方法有很多，下面介绍一种个人认为比较简单的直接操作dom填充方式。

　　扩展datagrid方法：

$.extend($.fn.datagrid.methods, {

        /**
         * 增加空行 用于没有数据或者数据不足以填满整个列表
         * @param jq datagrid对象
         */
        fillRows: function (jq) {
            var datacounts = 10; //填充总数
            var grid = $(jq);
            var pageopt = grid.datagrid('getPager').data("pagination").options;
            var pageSize = pageopt.pageSize;
            var rows = grid.datagrid("getRows");
            var length = rows.length;

            if (pageSize >= datacounts && length < datacounts) {
                var options = grid.datagrid("options");
                var gpanel = grid.datagrid("getPanel");
                var gbody1 = gpanel.find(".datagrid-view1 .datagrid-body");
                var tbody1 = gbody1.find("table>tbody");
                var gbody2 = gpanel.find(".datagrid-view2 .datagrid-body");
                var tbody2 = gbody2.find("table>tbody");
                
                var column1s = grid.datagrid("getColumnFields",true);
                var column2s = grid.datagrid("getColumnFields");
                var td1s = "";
                var td2s = "";
                
                
                if(tbody1.length > 0){
                    td1s += options.rownumbers ? "<td class='datagrid-td-rownumber'><div class="datagrid-cell-rownumber"></div></td>":"";
                    
                    if(column1s.length > 0){
                        $.each(column1s,function(i,field){
                            var opt = grid.datagrid("getColumnOption",field);
                            if(opt != null && !opt.hidden){
                                if(opt.checkbox){
                                     td1s +="<td field=""+field+""><div class="datagrid-cell-check"></div></td>";
                                 }else{
                                     td1s +="<td field=""+field+""><div class="datagrid-cell datagrid-cell-c1-"+field+""></div></td>";
                                 }
                            }
                        });
                    }
                    var events = $._data(gbody1.children().get(0),'events');
                    if(events != null){
                        //重新绑定click、dblclick事件
                        var clickfunc = events.click[0].handler;
                        events.click[0].handler = function(e){
                            var tt=$(e.target);
                            var tr=tt.closest("tr.datagrid-row");
                            if(tr.hasClass("datagrid-blank-row")){
                                return;
                            }
                            clickfunc(e);
                        };
                        var dblclickfunc = events.dblclick[0].handler;
                        events.dblclick[0].handler = function(e){
                            var tt=$(e.target);
                            var tr=tt.closest("tr.datagrid-row");
                            if(tr.hasClass("datagrid-blank-row")){
                                return;
                            }
                            dblclickfunc(e);
                        };
                    }
                }
                if(tbody2.length > 0 && column2s.length > 0){
                    $.each(column2s,function(i,field){
                        var opt = grid.datagrid("getColumnOption",field);
                        if(opt != null && !opt.hidden){
                            if(opt.checkbox){
                                 td2s +="<td field=""+field+""><div class="datagrid-cell-check"></div></td>";
                             }else{
                                 td2s +="<td field=""+field+""><div class="datagrid-cell datagrid-cell-c1-"+field+""></div></td>";
                             }
                        }
                    });
                    
                    var events = $._data(gbody2.get(0),'events');
                    if(events != null){
                        //重新绑定click、dblclick事件
                        var clickfunc = events.click[0].handler;
                        events.click[0].handler = function(e){
                            var tt=$(e.target);
                            var tr=tt.closest("tr.datagrid-row");
                            if(tr.hasClass("datagrid-blank-row")){
                                return;
                            }
                            clickfunc(e);
                        };
                        var dblclickfunc = events.dblclick[0].handler;
                        events.dblclick[0].handler = function(e){
                            var tt=$(e.target);
                            var tr=tt.closest("tr.datagrid-row");
                            if(tr.hasClass("datagrid-blank-row")){
                                return;
                            }
                            dblclickfunc(e);
                        };
                    }
                }
                for (var i = length; i < datacounts; i++) {
                    if(td1s != ""){
                         var tr = '<tr class="datagrid-blank-row datagrid-row'
                                + (options.striped && i % 2 != 0 ? ' datagrid-row-alt' : '') + '">' + td1s + '</tr>';
                        $(tr).appendTo(tbody1);
                    }
                    if(td2s != ""){
                        var tr = '<tr class="datagrid-blank-row datagrid-row'
                                + (options.striped && i % 2 != 0 ? ' datagrid-row-alt' : '') + '">' + td2s + '</tr>';
                        $(tr).appendTo(tbody2);
                    }
                }
            }
        }
    });

　　调用比较简单，直接在onLoadSuccess事件里调用即可，不必修改onSelect、onCheck等事件，不影响列头排序等功能。

　　调用：

1 $("#dgId").datagrid({
2     //.....
3     // other options 
4     //....
5     onLoadSuccess : function(data) {
6         $(this).datagrid("fillRows");
7     }
8 }