javascript笔记：自己写一个jqgrid框架（二）

接着写我自己的Grid，做这件事情十分有成就感，只要有时间，我会继续努力下去的。

今天的版本里，我主要做了两件事情：

第一件：完全套用了jqGrid的css样式；当然不是简单的拿来就用，其实jqGrid的css样式使用的是jqueryUI,下面是jqueryUI的地址：

http://jqueryui.com/themeroller/

如下图：

点击“Gallery”标签，如图所示：

大家看到了，jqueryUI有不少皮肤可以用。

既然jqueryUI有很多皮肤可以用，我们现在又使用jqGrid默认的css样式，那么就可以让我们自己的Grid达到换肤的效果。

第二件：我为自己的Grid加入了一个分组数据的功能

首先还是给出项目的目录结构：

大家看到theme文件夹下有三个文件夹：

1.le-frog（jqueryUI绿色的样式）
2.smoothness（jqueryUI灰白色的样式，这是我喜欢的样式，也是我以后开发的默认样式）
3.redmond（这是jqGrid的默认样式）

文章结尾我会给出源代码下载链接，所以这里我只给出关键的代码：

xjqGrid-1.0.js：

(function(window,undefined){
    var document = window.document,
        navigator = window.navigator,
        location = window.location,
        $ = window.jQuery;     
    
    Array.prototype.delRepeatItem = function(){//删除数组里的重复项
        var retArr=[],tempObj = {};
        for (var i = 0,tmpItem;(tmpItem = this[i]) != null;i++){
            if (!tempObj[tmpItem]){
                retArr.push(tmpItem);
                tempObj[tmpItem] = true;
            }
        }
        return retArr;
    }
    
    var xjqGridUtils = {// 工具类
        isString:function(obj){// 判断是不是String类型
            return (obj != null) && (obj != undefined) && (typeof obj == 'string') && (obj.constructor == String);    
        },
        isNumber:function(obj){// 判断是否是数组
            return (typeof obj == 'number') && (obj.constructor == Number);    
        },
        isDate:function(obj){// 判断是否是日期
            return obj && (typeof obj == 'object') && (obj.constructor == Date);
        },
        isArray:function(obj){//判断是否是数组
            return obj && (typeof obj == 'object') && (obj.constructor == Array);    
        },
        isObject:function(obj){//判断是否是对象
            return obj && (typeof obj == 'object') && (obj.constructor == Object)    
        },
        trim:function(str){// 去除左右两边空格
            return str.replace(/(^\s*)|(\s*$)/, "");;
        },
        groupForGridData:function(gridData,fieldName){// 对数据进行分组
            var groupField = [],groupGridData = [];
            $.each(gridData,function(ind,data){
                groupField.push(data[fieldName]);
            });    
            groupField = groupField.delRepeatItem();
            $.each(groupField,function(ind,data){
                var tmpObj = {},tmpArr = [];
                $.each(gridData,function(innerInd,innerData){
                    if (innerData[fieldName] == data){
                        tmpArr.push(innerData);
                    }
                });
                tmpObj[data] = tmpArr;
                groupGridData.push(tmpObj);
            });    
            return groupGridData;    
        }
    };
    var xjqGrid = {
        jsName:"xjqGrid.js",
        defaultVer:"20120628",
        executeFlag:true,
        errInfo:undefined,
        recordGridObj:{},
        targetDivId:undefined,
        targetDivObj:undefined,
        gridWidth:'100%',
        gridHeight:"100%",
        colNames:[],
        colModel:[],
        caption:"欢迎使用xjqGrid!",
        gridData:[],
        groupGridData:[],
        selectType:"none",
        groupFlag:true,
        groupView:{
            groupField:undefined
        },
        init:function(dataObj){//初始化
            if (xjqGridUtils.isObject(dataObj)){
                this.recordGridObj = dataObj;
                this.targetDivId = dataObj.targetId;
                this.gridWidth = dataObj.width;
                this.gridHeight = dataObj.height;
                this.colNames = dataObj.colNames;
                this.colModel = dataObj.colModel;
                this.caption = dataObj.caption;
                this.gridData = dataObj.gridData;
                this.selectType = dataObj.selectType;
                this.groupFlag = dataObj.groupFlag;
                this.groupView = dataObj.groupView;
                this.targetDivObj = $("#" + this.targetDivId);
                return this;
            }else{
                this.executeFlag = false;
                this.errInfo = "init的参数必须是javascript对象！";
            }
        },
        execute:function(){//执行方法
            var gridRootObj = this.createGridRoot();
            var gridCaptionObj = this.createGridCaption();
            var gridHeadObj = this.createGridHead();
            var gridBodyObj = this.createGridBody();
            
            gridRootObj.append(gridCaptionObj);
            gridRootObj.append(gridHeadObj);
            gridRootObj.append(gridBodyObj);
            this.targetDivObj.append(gridRootObj);
            
            this.targetDivObj.addClass("ui-jqgrid");
            this.targetDivObj.addClass("ui-widget");
            this.targetDivObj.addClass("ui-widget-content");
            this.targetDivObj.addClass("ui-corner-all");
            this.targetDivObj.css("width",this.gridWidth);
            this.targetDivObj.attr("id","xjqbox_" + this.targetDivId);
            
            this.eventHanlding();
        },
        createGridRoot:function(){
            var gridRootObj = $("<div></div>");
            gridRootObj.addClass("ui-jqgrid-view");
            gridRootObj.attr("id","xjqview_" + this.targetDivId);
            gridRootObj.css("width",this.gridWidth);
        
            return gridRootObj;
        },
        createGridCaption:function(){
            var gridCaptionDiv = $("<div></div>");
            gridCaptionDiv.addClass("ui-jqgrid-titlebar");
            gridCaptionDiv.addClass("ui-widget-header");
            gridCaptionDiv.addClass("ui-corner-top");
            gridCaptionDiv.addClass("ui-helper-clearfix");
            
            var gridCaptionA = $("<a></a>");
            gridCaptionA.addClass("ui-jqgrid-titlebar-close");
            gridCaptionA.addClass("HeaderButton");
            gridCaptionA.css("right","0px");
            
            var gridCaptionASpan = $("<span></span>");
            gridCaptionASpan.addClass("ui-icon");
            gridCaptionASpan.addClass("ui-icon-circle-triangle-n");
            
            gridCaptionA.append(gridCaptionASpan);
            
            var gridCaptionSpan = $("<span></span>");
            gridCaptionSpan.text(this.caption);
            gridCaptionSpan.addClass("ui-jqgrid-title");
            
            gridCaptionDiv.append(gridCaptionA);
            gridCaptionDiv.append(gridCaptionSpan);
            
            return gridCaptionDiv;
            
        },
        createGridHead:function(){
            var gridHeadDiv = $("<div></div>");
            gridHeadDiv.addClass("ui-state-default");
            gridHeadDiv.addClass("ui-jqgrid-hdiv");
            gridHeadDiv.css("width",this.gridWidth);
            
            var gridChildHeadDiv = $("<div></div>");
            gridChildHeadDiv.addClass("ui-jqgrid-hbox");
            
            var gridHeadTbl = $("<table></table>");
            gridHeadTbl.attr("cellspacing","0");
            gridHeadTbl.attr("cellpadding","0");
            gridHeadTbl.attr("border","0");
            gridHeadTbl.css("width","682px");
            
            var gridHeadTr = $("<tr></tr>");
            gridHeadTr.addClass("ui-jqgrid-labels");
            
            if (this.selectType){
                if (this.selectType == 'checkbox'){
                    var gridHeadThforSel = $("<th></th>");
                    gridHeadThforSel.addClass("ui-th-ltr");    
                    gridHeadThforSel.addClass("ui-th-column");
                    gridHeadThforSel.addClass("ui-state-default");
                    
                    gridHeadThforSel.attr("name",xjqGrid.targetDivId + "_cb");
                    gridHeadThforSel.attr("id",xjqGrid.targetDivId + "_cb");
                    gridHeadThforSel.css("width","20px");
                    gridHeadThforSel.css("border-bottom","0 none");
                    gridHeadThforSel.css("border-top","0 none");
                    gridHeadThforSel.css("border-left","0 none");
                    
                    var gridHeadThforSelDiv = $("<div></div>");
                    gridHeadThforSelDiv.attr("id","xjqgh_" + xjqGrid.targetDivId + "_cb");
                    
                    var gridHeadThforSelChk = $("<input type='checkbox'/>");
                    gridHeadThforSelChk.attr("cb_" + xjqGrid.targetDivId);
                    gridHeadThforSelChk.addClass("cbox");
                    
                    gridHeadThforSelDiv.append(gridHeadThforSelChk);
                    gridHeadThforSel.append(gridHeadThforSelDiv);
                    gridHeadTr.append(gridHeadThforSel);
                }
            }
            
            $.each(xjqGrid.colModel,function(ind,data){
                var gridHeadTh = $("<th></th>");    
                gridHeadTh.addClass("ui-th-ltr");
                gridHeadTh.addClass("ui-th-column");
                gridHeadTh.addClass("ui-state-default");
                
                gridHeadTh.css("border-bottom","0 none");
                gridHeadTh.css("border-top","0 none");
                gridHeadTh.css("border-left","0 none");
                
                if (data.name){
                    gridHeadTh.attr('name',xjqGrid.targetDivId + "_" + data.name);
                }
                if (data.id){
                    gridHeadTh.attr('id',xjqGrid.targetDivId + "_" + data.id);    
                }
                if (data.width){
                    gridHeadTh.css('width',data.width);    
                }
                gridHeadTh.text(xjqGrid.colNames[ind]);
                gridHeadTr.append(gridHeadTh);
            });
            
            gridHeadTbl.append(gridHeadTr);
            gridChildHeadDiv.append(gridHeadTbl);
            gridHeadDiv.append(gridChildHeadDiv);
            
            return gridHeadDiv;
        },
        createGridBody:function(){
            var gridBodyDiv = $("<div></div>");
            gridBodyDiv.addClass("ui-jqgrid-bdiv");
            gridBodyDiv.css("width",this.gridWidth);
            gridBodyDiv.css("height",this.gridHeight);
            
            var gridBodyChildDiv = $("<div></div>");
            gridBodyChildDiv.attr("position","relative");
            gridBodyChildDiv.append("<div></div>");
            
            var gridBodyTbl = $("<table></table>");
            gridBodyTbl.attr("cellspacing","0");
            gridBodyTbl.attr("cellpadding","0");
            gridBodyTbl.attr("border","0");
            gridBodyTbl.css("width","682px");
            gridBodyTbl.addClass("ui-jqgrid-btable");
            
            var gridBodyCellTr = $("<tr></tr>");
            gridBodyCellTr.css("height","auto");
            gridBodyCellTr.addClass("jqgfirstrow");
            
            if (this.selectType){
                if (this.selectType == 'checkbox'){
                    var gridBodyCellFirstTd = $("<td></td>");
                    gridBodyCellFirstTd.css("height","0px");
                    gridBodyCellFirstTd.css("width","20px");
                    gridBodyCellTr.append(gridBodyCellFirstTd);
                }
            }
            
            $.each(this.colModel,function(ind,data){
                var gridBodyCellTd = $("<td></td>");
                gridBodyCellTd.css("height","0px");
                if (data.width){
                    gridBodyCellTd.css("width",data.width);    
                }
                gridBodyCellTr.append(gridBodyCellTd);
            });
            gridBodyTbl.append(gridBodyCellTr);
            
            if (this.groupFlag){
                var colspanLen = 0;
                
                this.groupGridData = xjqGridUtils.groupForGridData(this.gridData,this.groupView.groupField);
                if (this.selectType == "none"){
                    colspanLen = this.colModel.length;
                }else{
                    colspanLen = this.colModel.length + 1;
                }
                $.each(this.groupGridData,function(firstInd,firstData){
                    for (var groupKey in firstData){
                        var groupGridBodyTr = $("<tr></tr>");
                        groupGridBodyTr.addClass("ui-widget-content");
                        groupGridBodyTr.attr("gridTrType","group");
                        groupGridBodyTr.attr("groupHead","group_grid_" + firstInd + "_" + xjqGrid.targetDivId);
                        var groupGridBodyTd = $("<td></td>");
                        groupGridBodyTd.attr("colspan",colspanLen);
                        groupGridBodyTd.css("padding-left","0px");
                        groupGridBodyTd.text(groupKey);
                        var groupGridBodySpan = $("<span></span>");
                        groupGridBodySpan.addClass("ui-icon tree-wrap-ltr ui-icon-circlesmall-minus");
                        groupGridBodySpan.css("cursor","pointer");
                        groupGridBodyTd.append(groupGridBodySpan);
                        groupGridBodyTr.append(groupGridBodyTd);
                        gridBodyTbl.append(groupGridBodyTr);
                        $.each(firstData[groupKey],function(secInd,secData){
                            var gridBodyContentTr = $("<tr></tr>");
                            gridBodyContentTr.addClass("ui-widget-content");
                            gridBodyContentTr.css("display","table-row");
                            gridBodyContentTr.attr("groupCell","group_grid_" + firstInd + "_" + xjqGrid.targetDivId + "_For"+ secInd);
                            if (xjqGrid.selectType){
                                if (xjqGrid.selectType == 'checkbox'){
                                    var gridBodyFirstTd = $("<td></td>");
                                    gridBodyFirstTd.css("text-align","center");
                                    
                                    gridBodyFirstChk = $("<input type='checkbox'/>");
                                    gridBodyFirstChk.addClass("cbox");
                                    gridBodyFirstChk.attr("index",secInd);
                                    
                                    gridBodyFirstTd.append(gridBodyFirstChk);
                                    gridBodyContentTr.append(gridBodyFirstTd);
                                }
                            }
                            
                            $.each(xjqGrid.colModel,function(thirdInd,thirdData){
                                var gridBodyContentTd = $("<td></td>");
                                if (thirdData.name){
                                    gridBodyContentTd.text(secData[thirdData.name]);
                                    gridBodyContentTd.attr("title",secData[thirdData.name]);
                                }
                                gridBodyContentTr.append(gridBodyContentTd);                                
                            });
                            gridBodyTbl.append(gridBodyContentTr);
                        });                        
                    }
                });
            }else{
                $.each(this.gridData,function(ind,data){
                    var gridBodyContentTr = $("<tr></tr>");
                    gridBodyContentTr.addClass("ui-widget-content");
                    gridBodyContentTr.addClass("jqgrow");
                    gridBodyContentTr.addClass("ui-row-ltr");
                    gridBodyContentTr.attr("id",ind);
                    
                    if (xjqGrid.selectType){
                        if (xjqGrid.selectType == 'checkbox'){
                            var gridBodyFirstTd = $("<td></td>");
                            gridBodyFirstTd.css("text-align","center");
                            
                            gridBodyFirstChk = $("<input type='checkbox'/>");
                            gridBodyFirstChk.addClass("cbox");
                            gridBodyFirstChk.attr("index",ind);
                            
                            gridBodyFirstTd.append(gridBodyFirstChk);
                            gridBodyContentTr.append(gridBodyFirstTd);
                        }
                    }
                    
                    $.each(xjqGrid.colModel,function(colInd,colData){
                        var gridBodyContentTd = $("<td></td>");
                        if (colData.name){
                            gridBodyContentTd.text(data[colData.name]);
                            gridBodyContentTd.attr("title",data[colData.name]);
                        }
                        gridBodyContentTr.append(gridBodyContentTd);
                    });
                    gridBodyTbl.append(gridBodyContentTr);
                });            
            }    
            gridBodyChildDiv.append(gridBodyTbl);
            gridBodyDiv.append(gridBodyChildDiv);    
            return gridBodyDiv;
        },
        eventHanlding:function(){
            $(".HeaderButton").bind("click",function(){
                if ($(".ui-jqgrid-hdiv").css("display") == "block"){
                    $(".ui-jqgrid-hdiv").css("display","none");
                    $(".ui-jqgrid-bdiv").css("display","none");
                    $("span",this).removeClass("ui-icon-circle-triangle-n").addClass("ui-icon-circle-triangle-s");
                }else{
                    $(".ui-jqgrid-hdiv").css("display","block");
                    $(".ui-jqgrid-bdiv").css("display","block");
                    $("span",this).removeClass("ui-icon-circle-triangle-s").addClass("ui-icon-circle-triangle-n");
                }
            });
            $('.HeaderButton').hover(function(){
                $(this).addClass("ui-state-hover");
            },function(){
                $(this).removeClass("ui-state-hover");
            });
            $(".ui-jqgrid-bdiv table tr").hover(function(){
                $(this).addClass("ui-state-hover");
            },function(){
                $(this).removeClass("ui-state-hover");    
            });
            $(".ui-jqgrid-bdiv table tr input[type='checkbox']").bind("click",function(){
                if ($(this).attr("checked")){
                    $("#" + $(this).attr("index")).addClass("ui-state-highlight");
                }else{
                    $("#" + $(this).attr("index")).removeClass("ui-state-highlight");
                }
            });
            $(".ui-jqgrid-hbox table tr input[type='checkbox']").bind("click",function(){
                if ($(this).attr("checked")){
                    $.each($(".ui-jqgrid-bdiv table tr input[type='checkbox']"),function(){
                        $(this).attr("checked","checked");
                        $("#" + $(this).attr("index")).addClass("ui-state-highlight");
                    });
                }else{
                    $.each($(".ui-jqgrid-bdiv table tr input[type='checkbox']"),function(){
                        $(this).removeAttr("checked");
                        $("#" + $(this).attr("index")).removeClass("ui-state-highlight");
                    });                    
                }
            });
            if (this.groupFlag){
                $(".ui-jqgrid-bdiv table tr[gridTrType='group'] span").bind("click",function(){
                    var spanObj = this;
                    $.each($(".ui-jqgrid-bdiv table tr[groupcell^='" + $(this).parent().parent().attr("groupHead") + "']"),function(ind,data){
                        console.log($(data).css("display"));
                        if ($(data).css("display") == "table-row"){
                            $(data).css("display","none");
                            $(spanObj).removeClass("ui-icon-circlesmall-minus");
                            $(spanObj).addClass("ui-icon-circlesmall-plus");
                        }else{
                            $(data).css("display","table-row");
                            $(spanObj).removeClass("ui-icon-circlesmall-plus");
                            $(spanObj).addClass("ui-icon-circlesmall-minus");                                                        
                        }
                    })
                });
            }
        },
        errorHanldling:function(){// 错误处理
            if (xjqGridUtils.isString(errObj)){
                alert("错误信息:" + errObj);
            }
        }
    };
    window.xjqGrid = xjqGrid;
})(window);

GroupXjqGrid1.0.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Group XjqGrid Demo 1.0</title>
</head>
<!--<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />-->
<link rel="stylesheet" type="text/css" media="screen" href="themes/smoothness/jquery-ui-1.8.21.custom.css" />
<!--<link rel="stylesheet" type="text/css" media="screen" href="themes/le-frog/jquery-ui-1.8.21.custom.css" />-->
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/xjqGrid-1.0.js"></script>
<body>
<div id="testXjqGrid"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
    xjqGrid.init({
        targetId:"testXjqGrid",
        "700px",
        height:"auto",
        caption:"Grouping Array Data [Group xjqGrid]",
        selectType:"none",
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
                {name:'id',index:'id', 60, sorttype:"int"},
                {name:'invdate',index:'invdate', 90, sorttype:"date", formatter:"date"},
                {name:'name',index:'name', 100, editable:true},
                {name:'amount',index:'amount', 80, align:"right",sorttype:"float", formatter:"number", editable:true},
                {name:'tax',index:'tax', 80, align:"right",sorttype:"float", editable:true},        
                {name:'total',index:'total', 80,align:"right",sorttype:"float"},        
                {name:'note',index:'note', 150, sortable:false}        
            ],
        gridData:[
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ],
        groupFlag:true,
        groupView:{
               groupField:"name"
           }
    }).execute();
});
</script>

换肤的关键代码就是：

<!--<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />-->
<link rel="stylesheet" type="text/css" media="screen" href="themes/smoothness/jquery-ui-1.8.21.custom.css" />
<!--<link rel="stylesheet" type="text/css" media="screen" href="themes/le-frog/jquery-ui-1.8.21.custom.css" />-->

jqGrid的样式不是太好用，我也添加了些自己的代码，修改的文件是ui.jqgrid.css，添加的代码如下：

/*xiajun add 2012-07-02*/
.ui-jqgrid-bdiv table tr.ui-widget-content td{border-right-color:inherit;border-right-style:solid;border-right-width:1px;text-align:left;border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:1px;font-weight:normal;height:22px}
.ui-jqgrid-bdiv tr.jqgfirstrow td{padding:0px}

下面就是我的xjqGrid的效果，贴出图来秀秀：

源代码的下载链接：

https://files.cnblogs.com/sharpxiajun/xjqGrid1.1.rar