如果要实现上图的grid，使用原始的jqgrid，代码如下：
1 function initGrid(){ 2 $("#gridId").jqGrid({ 3 datatype: "json", 4 mtype:'POST', 5 url:"<%=request.getContextPath()%>/gridServer!server.do", 6 colNames:['编号','用户名', '密码'], 7 colModel:[ 8 {name:'id',index:'id', width:100,editable:true,edittype:'text'}, 9 {name:'userName',index:'userName', width:100,editable:true,sorttype:'date'}, 10 {name:'password',index:'password', width:100,editable:true,edittype:'text'} 11 ], 12 viewrecords:true, 13 rowNum:10, 14 rowList:[10,20,30], 15 sortname: 'id', 16 sortorder: "asc", 17 viewrecords: true, 18 autowidth:true, 19 height:'auto', 20 caption:"用户信息", 21 pager:'pageDiv', 22 altRows:true, 23 altclass:'gridAltclass', 24 prmNames:{ 25 page:"pageNum", 26 rows:"pageSize", 27 sort: "sordCol", 28 order: "orderRule", 29 search:"_search" 30 } 31 ,jsonReader:{ 32 total:'pageTotal', 33 page:'pageNum', 34 records:'totalSize', 35 rows:'rows' 36 }, 37 beforeRequest:function(){ 38 $("#gridId").jqGrid('setGridParam',{ 39 postData:{ 40 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 41 userName:$("#userName").val() 42 } 43 }); 44 } 45 }); 46 }
如果要实现多个这样的grid，其实很多类似datatype、mtype、viewrecords、autowidth、height等等这样的配置信息是重复的，而且每次修改配置文件的时候必须要保证colNames、colModel的长度必须一致，为了让datatype等公共配置信息不分布在各个地方，我在jqgrid上做了简单的包装。虽有很多配置信息修改jqgrid源代码会更佳快捷，但我不建议这样做。如果修改了源代码，以后想通过升级jqgrid版本来引进新功能的时候我们不得不重修对新版本的源码做一次同样的修改，稍有不慎漏改或者改错了某个地方可能会导致不可预知的错误。
jquery.jqGrid.extend.js
1 if( Array.prototype.indexOf==undefined ){ 2 Array.prototype.indexOf = function(el){ 3 return $.inArray(el,this); 4 }; 5 } 6 function isEmptyString( str ){ 7 return str==undefined || $.trim(str)==''; 8 } 9 function queryGridData(gridId){ 10 $("#"+gridId).trigger("reloadGrid",[{page:1}]); 11 } 12 function exportGridExcel(gridId){ 13 extJqGrid.exportGridExcel(gridId); 14 } 15 var extJqGridObjects = {}; 16 var extJqGrid ={ 17 defaultConfig:{ 18 datatype:'json', 19 mtype:'POST', 20 url:contextPath+"/gridServer!server.do", 21 rowNum:10, 22 rowList:[10,15,20], 23 altRows:true, 24 altclass:'gridAltclass', 25 autowidth:true, 26 height:'auto', 27 scrollOffset:0, 28 forceFit:true, 29 viewrecords:true, 30 toolbar:[true,'top'], 31 //pgbuttons:true, 32 pageMultiselect:false, 33 rownumbers:true, 34 showPager:true, 35 loadDataFlag:true, 36 useColSpanStyle:false, 37 excelDataFrom:'server', 38 'emptyrecords':'没有符合条件的记录', 39 prmNames:{ 40 page:"pageNum", 41 rows:"pageSize", 42 sort: "sordCol", 43 order: "orderRule", 44 search:"_search" 45 } 46 ,jsonReader:{ 47 total:'pageTotal', 48 page:'pageNum', 49 records:'totalSize', 50 rows:'rows' 51 } 52 }, 53 GridHeader:function(colModel){ 54 if( colModel.colspan!=undefined&&colModel.colspan>1 ){ 55 this.colName = isEmptyString(colModel.colspanTitle)?colModel.colName : colModel.colspanTitle; 56 if( isEmptyString(this.colName) ){ 57 this.colName = ''; 58 } 59 }else{ 60 this.colName = colModel.colName; 61 } 62 this.name = colModel.name; 63 this.isParent = false; 64 this.countFlag=colModel.countFlag; 65 }, 66 /** 67 * MergeHeader extends GridHeader 68 */ 69 MergeHeader:function(colModels,colIndex){ 70 var colModel = colModels[colIndex]; 71 extJqGrid.GridHeader.call(this,colModel); 72 if( colModel.colspan!=undefined&&colModel.colspan>1 ){ 73 var subHeaders = []; 74 for( var i=colIndex;i<(colIndex+colModel.colspan);i++ ){ 75 subHeaders.push( new extJqGrid.GridHeader(colModels[i])); 76 } 77 this.subHeaders = subHeaders; 78 this.isParent = true; 79 } 80 }, 81 /** 82 * 初始化grid表头信息，如果isParent为true，则表示该表头为合并单元格 83 */ 84 initGridHeaders:function(config){ 85 var colModels =config.colModel; 86 var gridHeaders = []; 87 for( var i=0;i<colModels.length;i++ ){ 88 if(colModels[i].hidden||isEmptyString(colModels[i].name)) continue; 89 gridHeaders.push(new extJqGrid.MergeHeader(colModels,i)); 90 i+= colModels[i].colspan==undefined ? 0 : (colModels[i].colspan-1); 91 } 92 config.gridHeaders = gridHeaders; 93 }, 94 /** 95 * 合并表头信息 96 */ 97 GroupHeader:function(gridHeader){ 98 this.startColumnName = gridHeader.name; 99 this.numberOfColumns = gridHeader.subHeaders.length; 100 this.titleText = gridHeader.colName; 101 }, 102 /** 103 *合并表头 104 */ 105 setGroupHeaders:function(config){ 106 if(!config.useColSpanStyle) 107 return; 108 var groupHeaders = []; 109 $(config.gridHeaders).each(function(index,gridHeader){ 110 if( gridHeader.isParent ){ 111 groupHeaders.push(new extJqGrid.GroupHeader(gridHeader)); 112 } 113 }); 114 $("#"+config.gridId).jqGrid('setGroupHeaders', { 115 useColSpanStyle: true, 116 groupHeaders:groupHeaders 117 }); 118 }, 119 initColModel:function(config){ 120 var undefinedColNames = false; 121 if( config.colNames==undefined ){ 122 undefinedColNames = true; 123 config.colNames=[]; 124 } 125 var colModels = config.colModel; 126 $.each(colModels,function(index,colModel){ 127 if( colModel.key===true&&config.keyName==undefined ){ 128 config.keyName = colModel.name; 129 } 130 if( !config.useColSpanStyle&&colModel.colspan!=undefined&&colModel.colspan>1 ){ 131 config.useColSpanStyle = true; 132 } 133 if( colModel.index==undefined&&colModel.name!=undefined ){ 134 colModel.index = colModel.name; 135 } 136 if(undefinedColNames){ 137 if(colModel.colName==undefined){ 138 colModel.colName = colModel.name==undefined ? "" : colModel.name; 139 } 140 config.colNames.push(colModel.colName); 141 } 142 }); 143 extJqGrid.initGridHeaders(config); 144 } 145 ,init:function(gridId,userConfig){ 146 userConfig.gridId = gridId; 147 var config = extJqGrid.initGridConfig(userConfig); 148 extJqGrid.initGridEvent(config); 149 return config; 150 } 151 ,initGridConfig:function(userConfig){ 152 var config = {}; 153 $.extend(true,config,extJqGrid.defaultConfig,userConfig); 154 extJqGrid.initColModel(config); 155 if(config.rowNum==undefined){ 156 config.rowNum = rowList[0]; 157 } 158 if(config.loadAll==true){ 159 config.rowNum = -1; 160 } 161 if(config.showPager==true&&config.pager==undefined){ 162 if( $("#extJqGrid_page_"+config.gridId).length==0 ){ 163 $("#"+config.gridId).after('<div id="extJqGrid_page_'+config.gridId+'"></div>'); 164 } 165 config.pager = 'extJqGrid_page_'+config.gridId; 166 } 167 config.pagerId = config.pager; 168 if( config.cellEdit&&config.cellsubmit==undefined ){ 169 config.cellsubmit='clientArray'; 170 } 171 if( config.exportExcel==true ){ 172 if(isEmptyString(config.exportExcelName)){ 173 config.exportExcelName = isEmptyString(config.caption) ? 'gridExportExcel.xls' : config.caption; 174 } 175 if( $("#_gridExportExcelForm").length==0 ){ 176 $("body").prepend('<form action="'+contextPath+'/gridServer!export.do" id="_gridExportExcelForm" style="display: none;" method="post">'+ 177 "<input type='hidden' id='_exportExcelName' name='exportGridParam.exportExcelName' >"+ 178 "<input type='hidden' id='_gridHeadStr' name='exportGridParam.gridHeadStr' >"+ 179 "<input type='hidden' id='_gridSql' name='exportGridParam.gridSql' >"+ 180 "<input type='hidden' id='_excelDataSql' name='exportGridParam.excelDataSql' >"+ 181 "<input type='hidden' id='_datasourceClass' name='exportGridParam.datasourceClass' >"+ 182 "<input type='hidden' id='_queryParamStr' name='exportGridParam.queryParamStr' >"+ 183 "<input type='hidden' id='_gridLocalDatas' name='gridLocalDatas' >"+ 184 '</form>'); 185 } 186 } 187 return config; 188 } 189 ,exportGridExcel:function(gridId){ 190 var config = extJqGridObjects[gridId]; 191 if(config==undefined){ 192 return; 193 } 194 var gridExportExcelForm = $("#_gridExportExcelForm"); 195 $(gridExportExcelForm).find("input").val(''); 196 $("#_exportExcelName").val(config.exportExcelName); 197 $("#_gridHeadStr").val(JSON.stringify(config.gridHeaders)); 198 if(config.excelDataFrom==='server'){ 199 extJqGrid.exportGridExcelFromServer(config,gridExportExcelForm); 200 }else if(config.excelDataFrom==='local'){ 201 extJqGrid.exportGridExcelFromLocal(config,gridExportExcelForm); 202 } 203 $("#_gridExportExcelForm").submit(); 204 } 205 ,exportGridExcelFromServer:function(config,gridExportExcelForm){ 206 queryGridData(config.gridId); 207 $(gridExportExcelForm).attr('action',(contextPath+'/gridServer!export.do?timeStap='+new Date().getTime())); 208 if(!isEmptyString(config.gridSql)){ 209 $("#_gridSql").val(config.gridSql); 210 } 211 if(!isEmptyString(config.excelDataSql)){ 212 $("#_excelDataSql").val(config.excelDataSql); 213 } 214 if(!isEmptyString(config.datasourceClass)){ 215 $("#_datasourceClass").val(config.datasourceClass); 216 } 217 var postData = $("#"+config.gridId).jqGrid('getGridParam','postData'); 218 if(postData!=undefined){ 219 $("#_queryParamStr").val(JSON.stringify(postData)); 220 } 221 222 } 223 ,exportGridExcelFromLocal:function(config,gridExportExcelForm){ 224 $(gridExportExcelForm).attr('action',(contextPath+'/gridServer!exportFromLocal.do?timeStap='+new Date().getTime())); 225 var datas = extJqGrid.getAllLocalDatas(config.gridId); 226 $("#_gridLocalDatas").val(JSON.stringify(datas)); 227 } 228 ,getAllLocalDatas:function(gridId){ 229 var config = extJqGridObjects[gridId]; 230 var rowDatas = []; 231 if(config.multiselect){ 232 if(config.loadonce){ //一次性加载:所有的数据 在页面保存 233 $(config.selectIds).each(function( index,rowId ){ 234 rowDatas.push( $("#"+gridId).getLocalRow(rowId)); 235 }); 236 }else{ //非一次性加载:在服务器端分页的 237 $($("#"+gridId).jqGrid('getGridParam','selarrrow')).each(function( index,rowId ){ 238 rowDatas.push( $("#"+gridId).getRowData(rowId)); 239 }); 240 } 241 }else{ 242 if(config.loadonce){ // 一次性加载:所有的数据 在页面保存 243 rowDatas = $("#"+gridId).getGridParam('data'); 244 }else{ // 非一次性加载:在服务器端分页的 245 rowDatas = $("#"+gridId).getRowData(); 246 } 247 } 248 return rowDatas; 249 } 250 ,initGridEvent:function(config){ 251 extJqGrid.initBeforeRequestEvent(config); 252 extJqGrid.initGridCompleteEvent(config); 253 if( config.cellEdit==true ){ 254 extJqGrid.initEditEvent(config); 255 } 256 extJqGrid.initSelectEvent(config); 257 } 258 ,initEditEvent:function(config){ 259 extJqGrid.initAfterEditCell(config); 260 extJqGrid.initBeforeSaveCell(config); 261 extJqGrid.initAfterSaveCell(config); 262 } 263 ,initSelectEvent:function(config){ 264 //extJqGrid.initBeforeSelectRow(config);//解决最新版本cellEdit和mutilselect同时为true不能选择的问题 265 extJqGrid.initSelectLocalAllRow(config); 266 extJqGrid.initOnSelectRow(config); 267 extJqGrid.initOnSelectAll(config); 268 } 269 ,initOnSelectRow:function(config){ 270 if(typeof config.onSelectRow ==='function'){ 271 config.customOnSelectRow = config.onSelectRow; 272 } 273 config.onSelectRow = function(rowid,status,e){ 274 if(config.customOnSelectRow!=undefined){ 275 config.customOnSelectRow.apply(this,arguments); 276 } 277 if( config.selectIds!=undefined ){ 278 extJqGrid.modifySelectIds(config,rowid,status); 279 } 280 }; 281 } 282 ,initSelectLocalAllRow:function(config){//初始化一次性加载时选择本地所有文件的事件 283 if(config.multiselect===true&&config.pageMultiselect===true&&config.loadonce===true){ 284 config.selectIds=[]; 285 } 286 } 287 ,initOnSelectAll:function(config){ 288 if( typeof config.onSelectAll ==='function' ){ 289 config.customOnSelectAll = config.onSelectAll; 290 } 291 config.onSelectAll = function(rowids,status){ 292 if(config.customOnSelectAll!=undefined){ 293 config.customOnSelectAll.apply(this,arguments); 294 } 295 if(config.selectIds!=undefined){ 296 $(rowids).each(function(index,rowid){ 297 extJqGrid.modifySelectIds(config,rowid,status); 298 }); 299 } 300 }; 301 } 302 ,modifySelectIds:function( config,rowid,status ){ 303 if( status ){ 304 if($.inArray(rowid,config.selectIds)==-1 ){ 305 config.selectIds.push(rowid); 306 } 307 }else{ 308 config.selectIds = $.grep(config.selectIds,function(_rowid,index){ 309 return _rowid!=rowid; 310 }); 311 /* 312 if(config.selectAllLocalRows){ 313 $('#'+config.gridId+"SelectAllLocalRows").attr('checked', false); 314 } 315 */ 316 } 317 } 318 ,initBeforeSelectRow:function(config){ 319 if( typeof config.beforeSelectRow !='function'&&config.cellEdit==true&&config.multiselect==true ){ 320 config.beforeSelectRow = function(rowid, e){ 321 $(this).restoreRow(rowid); 322 return false; 323 }; 324 } 325 } 326 ,initAfterEditCell:function(config){ 327 if(typeof config.afterEditCell =='function'){ 328 config.customAfterEditCell = config.afterEditCell; 329 } 330 config.afterEditCell = function(rowid, cellname, value, iRow, iCol){//注册焦点离开保存单元格事件 331 if(config.customAfterEditCell!=undefined){ 332 config.customAfterEditCell.apply(this,arguments); 333 } 334 if( !(config.customAfterEditCell!=undefined&&config.customAfterEditCell.toString().indexOf("saveCell")!=-1)){ 335 $("#"+iRow+"_"+cellname,"#"+config.gridId).blur(function(){ 336 $('#'+config.gridId).jqGrid('saveCell',iRow, iCol); 337 }); 338 } 339 extJqGridObjects[config.gridId].editCellOldValue =value; 340 }; 341 } 342 ,initBeforeSaveCell:function(config){ 343 if(typeof config.beforeSaveCell =='function'){ 344 config.customBeforeSaveCell = config.beforeSaveCell; 345 } 346 config.beforeSaveCell = function(rowid, cellname, value, iRow, iCol){ 347 if( config.customBeforeSaveCell!=undefined ){ 348 var returnValue = config.customBeforeSaveCell.apply(this,arguments); 349 if( returnValue==false ){ 350 return extJqGridObjects[config.gridId].editCellOldValue; 351 } 352 } 353 }; 354 } 355 ,initAfterSaveCell:function(config){ 356 if( typeof config.afterSaveCell =='function' ){ 357 config.customAfterSaveCell=config.afterSaveCell; 358 } 359 config.afterSaveCell=function(rowid, cellname, value, iRow, iCol){ 360 if(config.customAfterSaveCell!=undefined){ 361 config.customAfterSaveCell.apply(this, arguments); 362 } 363 if( value!=extJqGridObjects[config.gridId].editCellOldValue ){ 364 $("#"+config.gridId+" tr td.edit-cell").css({background:'#55C8FC',color:'red'}); 365 } 366 }; 367 } 368 ,initBeforeRequestEvent:function(config){ 369 if(typeof config.beforeRequest =='function'){ 370 config.customBeforeRequest = config.beforeRequest; 371 } 372 config.beforeRequest = function(){ 373 if(config.loadDataFlag==false){ 374 config.loadDataFlag=true; 375 return false; 376 } 377 config.loadDataFlag = false; 378 if( config.customBeforeRequest!=undefined ){ 379 var requestFlag = config.customBeforeRequest.apply(this,arguments); 380 if( requestFlag==false ){ 381 return false; 382 } 383 } 384 if(config.defaultRequestParamNames==undefined){//初始化默认的参数名称 385 config.defaultRequestParamNames = []; 386 for( var i in config.prmNames ){ 387 config.defaultRequestParamNames.push(config.prmNames[i]); 388 } 389 } 390 var postData = $("#"+config.gridId).jqGrid('getGridParam','postData'); 391 if(postData==undefined){ 392 postData = {}; 393 }else{ 394 for(var item in postData){ 395 if($.inArray(item,config.defaultRequestParamNames)==-1){ 396 postData[item]= undefined; 397 } 398 } 399 } 400 if( config.postData!=undefined ){ 401 $.extend(postData,config.postData); 402 } 403 postData['loadonce'] = config.loadonce; 404 postData['gridSql'] = config.gridSql; 405 postData['countSql'] = config.countSql; 406 postData['datasourceClass'] = config.datasourceClass; 407 if( !config.loadDataFlag ){ 408 config.loadDataFlag = true; 409 } 410 if( config.loadAll||config.loadonce ){ 411 jQuery.extend(postData, {loadAll:true}); 412 } 413 if( config.postParamFields!=undefined ) { 414 $.each(config.postParamFields,function(index, _paramName){ 415 var _paramValue = $("#"+_paramName).val(); 416 if(_paramValue!=null&& $.trim(_paramValue)!=''){ 417 postData[_paramName] = $.trim(_paramValue); 418 }else{ 419 postData[_paramName] = ''; 420 } 421 }); 422 } 423 if( $.isFunction(config.preparePostData) ){ 424 var _postData = config.preparePostData.apply(this,arguments); 425 if( _postData!=undefined&&_postData!=null ){ 426 jQuery.extend(postData, _postData); 427 } 428 } 429 $("#"+config.gridId).jqGrid('setGridParam',{ 430 postData:postData, 431 url:(contextPath+"/gridServer!server.do?timeStamp="+new Date().getTime()) 432 }); 433 }; 434 } 435 ,initGridCompleteEvent:function(config){ 436 if( typeof config.gridComplete == 'function' ){ 437 config.customGridComplete = config.gridComplete; 438 } 439 config.gridComplete = function(){//如果beforeRequest返回false，则不会触发该事件 440 var gridObject = extJqGridObjects[config.gridId]; 441 gridObject.loadDataFlag = true; 442 if( config.customGridComplete!=undefined ){ 443 config.customGridComplete.apply(this,arguments); 444 } 445 //本地分页且多选的时候使用 446 if(config.multiselect===true&&config.pageMultiselect===true 447 &&config.loadonce===true&&config.keyName!=undefined){ 448 $("#"+config.gridId).resetSelection(); 449 var currentPageDatas = $("#"+config.gridId).jqGrid("getRowData"); 450 $(currentPageDatas).each(function(index,data){ 451 if($.inArray(data[config.keyName],config.selectIds)!=-1){ 452 $("#"+config.gridId).setSelection(data[config.keyName],false); 453 } 454 }); 455 } 456 }; 457 } 458 ,selectLocalAllRow:function(gridId){ 459 extJqGridObjects[gridId].selectIds = extJqGrid.getAllLocalRowIds(gridId); 460 extJqGrid.selectAllRow(gridId); 461 } 462 ,deSelectLocalAllRow:function(gridId){ 463 extJqGridObjects[gridId].selectIds = []; 464 extJqGrid.selectAllRow(gridId, false); 465 } 466 ,selectAllRow:function(gridId,checked){ 467 $("#"+gridId).trigger("jqGridSelectAll",!(checked===false)); 468 /* 469 $('#cb_'+gridId).attr('checked', (checked===false)); 470 $("#cb_"+gridId).trigger("click"); 471 $('#cb_'+gridId).attr('checked', !(checked===false)); 472 */ 473 } 474 ,deselectAllRow:function(gridId){ 475 extJqGrid.selectAllRow(gridId, false); 476 } 477 ,getAllLocalRowIds:function( gridId ){ 478 var config = extJqGridObjects[gridId]; 479 if( config.allLocalRowIds==undefined||config.allLocalRowIds==null||config.allLocalRowIds.length==0 ){ 480 var allLocalRowIds = []; 481 var allLocalRowDatas = $("#"+config.gridId).getGridParam('data'); 482 $(allLocalRowDatas).each(function( index,rowData ){ 483 allLocalRowIds.push(rowData._id_); 484 }); 485 config.allLocalRowIds = allLocalRowIds; 486 } 487 return config.allLocalRowIds; 488 } 489 }; 490 $.fn.extJqGrid = function(userConfig){ 491 var gridId = $(this).attr('id'); 492 var config = extJqGrid.init(gridId, userConfig); 493 extJqGridObjects[config.gridId] = config; 494 $("#"+gridId).jqGrid(config); 495 extJqGrid.setGroupHeaders(config); 496 $(this).bind('jqGridSelectAll',function(e,checkFlag){ 497 if(e.isTrigger===2){ 498 return; 499 } 500 $('#cb_'+gridId).attr('checked', (checkFlag===false)); 501 $("#cb_"+gridId).trigger("click"); 502 $('#cb_'+gridId).attr('checked', !(checkFlag===false)); 503 }); 504 };
引用jquery.jqGrid.extend.js文件，还是实现上图一样的功能，代码如下：
1 $("#gridId").extJqGrid({ 2 colModel:[ 3 {name:'id',colName:'编号',key:true,width:100}, 4 {name:'userName',colName:'用户名',width:100}, 5 {name:'password',colName:'密码', width:100} 6 ], 7 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 8 postParamFields:["userName"], 9 caption:"用户信息" 10 });
相对使用原始的jqgrid来说是不是简单了不少？
在jquery.jqGrid.extend.js中把colNames和colModel合并成colModel，这样避免了因colNames和colModel长度不同而报错的情况。在系统中大部分的表格只需要一个sql语句就能把表格中所有的数据都查询出来，所以在extJqGrid中添加了gridSql（查询grid数据sql语句）这个配置，这里默认向后台服务器传递的参数为gridSql、pageSize、pageNum、sordCol、orderRule、_search，如果需要向后台传递额外的参数，则可以使用postParamFields配置，也可以使用原始的jqgrid一样通过配置beforeRequest方法来传递参数。postParamFields表示需要传值给后台的input 输入域的id数组。
我在后台用统一的Action、Service、Dao对jqgrid的请求做了相应的封装，因为涉及到的东西太多，后台代码这里就不再给出了，我只分享一下大概的思路。
1、获取jqgrid请求参数（如上面的gridSql、pageSize等等），将请求参数存放到map中
2、根据gridSql在系统中获取对应的sql语句，假设这个sql语句为select * from t_user where user_name like ?
3、在gridSql对应的sql语句外面包一层，查询符合条件的记录数，包装后的sql语句如：select count(1) cnt from( select * from t_user where user_name like ? ) t
4、如果第3步查询结果为0则直接返回，如果第3步查询结果大于0，则调用第5步
5、在gridSql对应的sql语句外面包一层，分页查询符合条件的grid记录，包装后的sql语句如下：select * from (select * from t_user where user_name like ?) limit 0,10 ,如果sordCol参数不为空则需要在包装的sql语句中添加排序规则
6、返回查询结果
上面只是大概分享了一下对gridSql的简单包装思路，因为后台架构的问题，作者的实现方式远比上面所有的复杂。
gridSql只是满足了大部分grid的需求，但有些grid数据来源不能简单的使用sql语句查询那么简单，可能要经过复杂的运算或者到第三方系统中获取数据。针对这种情况，我在extJqGrid中添加了datasourceClass配置参数。datasourceClass的值必须为IGridDatasource接口的实现类，用户可以在实现类中完成相应的grid数据业务查询。IGridDatasource接口如下：
1 public interface IGridDatasource { 2 public <E> PageResult<E> getPageResult(GridParam gridParam)throws Exception; 3 }
表头合并colspan参数：
1 $("#gridId").extJqGrid({ 2 colModel:[ 3 {name:'id',colName:'编号',key:true,width:100}, 4 {name:'userName',colName:'用户名',width:100,colspan:2}, 5 {name:'password',colName:'密码', width:100} 6 ], 7 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 8 postParamFields:["userName"], 9 caption:"用户信息" 10 });
导出excel配置参数exportExcel：
1 $("#gridId").extJqGrid({ 2 colModel:[ 3 {name:'id',colName:'编号',key:true,width:100}, 4 {name:'userName',colName:'用户名',width:100,colspan:2}, 5 {name:'password',colName:'密码', width:100} 6 ], 7 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 8 postParamFields:["userName"], 9 caption:"用户信息" 10 ,exportExcel:true 11 });
默认excelDataFrom为server,excel的数据为数据库中符合查询条件的所有数据，表头合并信息和页面保持一致，也可以通过exportExcelName来配置导出excel的文件名称。
如果excelDataFrom为local，则excel数据来源于页面的grid，当grid多选配置multiselect为false时excel的数据为当年页面中所有数据，当grid多选配置multiselect为false，则excel的数据为页面中所有选中的数据。
修改单元格内容后，自动标识（背景颜色不是很好看，读者可以自己调整）
1 $("#gridId").extJqGrid({ 2 colModel:[ 3 {name:'id',colName:'编号',key:true,width:100}, 4 {name:'userName',colName:'用户名',width:100,editable:true}, 5 {name:'password',colName:'密码', width:100} 6 ], 7 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 8 postParamFields:["userName"], 9 caption:"用户信息" 10 ,cellEdit:true 11 });
分页多选：
假设有这样的需求，我们在第一页选择几条记录，然后翻到第二页再选择几条记录，最后翻回第一页，要求原来选中的记录状态任然为选中。jqgrid是不支持这样的特性的，所以我添加了pageMultiselect选项来完成类似这样的功能。当且仅当loadonce、multiselect和pageMultiselect都为true时可实现翻页多选（大家可以根据自己的需求做相关修改）
1 $("#gridId").extJqGrid({ 2 colModel:[ 3 {name:'id',colName:'编号',key:true,width:100}, 4 {name:'userName',colName:'用户名',width:100}, 5 {name:'password',colName:'密码', width:100} 6 ], 7 gridSql:'com.myproject.user.dao.UserDao.queryByCondition', 8 postParamFields:["userName"], 9 caption:"用户信息" 10 ,loadonce:true 11 ,multiselect:true 12 ,pageMultiselect:true 13 });
本地全选：
跟分页多选的条件一样，当且仅当loadonce、multiselect和pageMultiselect都为true时，可以使用extJqGrid.selectLocalAllRow()方法选择本地所有记录，调用extJqGrid.selectLocalAllRow()方法取消全选本地记录
翻到第二页所有记录也都是选中状态
触发全选事件：
如果使用原生的jqgrid，想要使用程序触发jqGridSelectAll事件进行全选是无效的，虽然jqgrid官方文档提供了jqGridSelectAll事件的说明，但源码中根本没有定义这样的事件。我在封装的js中添加了jqGridSelectAll事件，通过以下代码可以触发grid的全选和取消全选事件
$("#gridId").trigger("jqGridSelectAll",true);
$("#gridId").trigger("jqGridSelectAll",false);
如果程序存在什么问题，希望各位大神能帮忙指正，在此不胜感激！