如果要實現上圖的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);
如果程序存在什么問題，希望各位大神能幫忙指正，在此不勝感激！