jqGrid是一款處理表格展現的jQuery插件，支持分頁、滾動加載、搜索、鎖定、拖動等一系列對表格的常規操作。以下是最近項目中實踐jqGrid的整理

?

1、引入到項目中來

jqGrid的主頁在http://www.trirand.com/blog/?，上面提供了下載、demo、wiki等文檔，都比較詳盡。特別是http://www.trirand.com/jqgridwiki/doku.php?中值得開發中多多關注。好了，下載后需要在項目的頭文件中引入：

?

Js代碼??

<link?rel="stylesheet"?type="text/css"?href="$request.contextPath/script/jqGrid/css/ui.jqgrid.css"?/>???

<script?type="text/javascript"?src="$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script>???

<script?type="text/javascript"?src="$request.contextPath/script/jqGrid/js/i18n/grid.locale-cn.js"></script>??

jqGrid采用了jQueryUI的CSS主題，需要下載相應的主題http://jqueryui.com/themeroller/?找到相應的主題下載，如果使用了datepicker控件，還需要ui。如下：

Js代碼??

<link?rel="stylesheet"?type="text/css"?href="$request.contextPath/script/jqGrid/css/jquery-ui-1.8.22.custom.css"?media="all"/>???

<script?type="text/javascript"?src="$request.contextPath/script/ui/jquery-ui-1.8.22.custom.min.js"></script>???

<script?type="text/javascript"?src="$request.contextPath/script/ui/jquery.ui.datepicker-zh-CN.js"></script>??

?

2、在頁面中使用

在頁面中如vm、jsp中使用，需要兩個基本的元素

Js代碼??

<table?id="jqGridId"></table>?//這個是必須的???

<div?id="pager"></div>?//這個是顯示分頁bar的信息，根據需要??

然后在js中

Js代碼??

$("#jqGridId").jqGrid({options})??

這樣就是一個最基本的設置，重點是在這里的options上，包括基本參數設定和函數。具體可見官網的文檔：

寫道 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

?

?3、參數(options)

參數是指jqGrid對象中設置各種特性的屬性，具體的設置在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

下面一個例子，羅列了常用的參數，并對參數進行了說明：

Js代碼??

$("#jqGridId").jqGrid({???

????url:?s2web.appURL?+?"jq/queryWare.action",???

????datatype:"local",?//為local時初始化不加載，支持json，xml等???

????mtype:?"POST",???

????colNames:['編號',?'作者',?'ISBN','重量','描述'],?//表頭???

????colModel:[?//這里會根據index去解析jsonReader中root對象的屬性，填充cell???

????????{name:'id',?index:'id',?width:55,?align:"center",sortable:false},??

????????{name:'author',?index:'author',?width:100,?sortable:false},???

????????{name:'isbn',?index:'isbn',?width:120,align:"right",?sortable:false},???

????????{name:'weight',?index:'weight',?width:80,align:"center",?sortable:false},???

????????{name:'wareDesc',?index:'wareDesc',?width:400,?sortable:false}???

????],???

????width:?'auto',?//數字?&?'auto','100%'???

????height:?200,???

????rowNum:?5,?//每頁記錄數???

????rowList:[5,?10,20,30],?//每頁記錄數可選列表???

????pager:?'#pager2',?//分頁標簽divID???

????viewrecords:?true,?//顯示記錄數信息，如果這里設置為false,下面的不會顯示?recordtext:?"第{0}到{1}條,?共{2}條記錄",?//默認顯示為{0}-{1}?共{2}條?scroll:?false,?//滾動翻頁，設置為true時翻頁欄將不顯示??

????/**這里是排序的默認設置，這些值會根據列表header點擊排序時覆蓋*/?sortable:?false,???

????sortname:?"warename",???

????sortorder:?"desc",???

??

????caption:"商品列表",?//顯示查詢結果表格標題???

????rownumbers:?true,?//設置列表顯示序號,需要注意在colModel中不能使用rn作為index???

????rownumWidth:?20,?//設置顯示序號的寬度，默認為25???

????multiselect:?true,?//多選框???

????multiboxonly:?true,?//在點擊表格row時只支持單選，只有當點擊checkbox時才多選，需要multiselect=true是有效???

????prmNames?:?{?//如當前查詢實體為ware，這些可以在查詢對象的superObject中設定???

????????page:?"wareDetail.page",???

????????rows:?"wareDetail.rows",???

????????sort:?"wareDetail.sidx",???

????????order:?"wareDetail.sord",???

????????search:?"wareDetail.search"???

????},???

????jsonReader:{?//server返回Json解析設定???

????????root:?"list",?//對于json中數據列表???

????????page:?"page",???

????????total:?"totalPage",???

????????records:?"totalCount",??

????????repeatitems:?false,???

????}???

});???

??

$("#jqGridId").jqGrid('navGrid','#pager2'{edit:false,add:false,del:false,search:false});//這里設定分頁bar顯示的信息??

?以上各個參數的含義已經做了說明，具體可見上面文檔的詳細介紹。

?

prmNames:?這些參數每次會作為請求參數傳遞給server端，一般維持分頁、排序等信息。可在查詢對象中統一聲明這些屬性，與這里設置保持一致。如：

Java代碼??

public?class?JqGridQueryBase?implements?Serializable?{??

??

????private?static?final?long?serialVersionUID?=?-2849625318773684220L;??

??

????/**?當前頁面?*/??

????private?int???????????????page;??

????/**?每頁的記錄數?*/??

????private?int???????????????rows;??

????/**?查詢字段值?*/??

????private?String????????????search;??

????/**?排序字段和排序方式如：username/asc?*/??

????private?String????????????sidx;??

????private?String????????????sord;??

??

????/**?分頁信息:總記錄數?*/??

????private?int???????????????totalCount;??

?

jsonReader:?與prmNames一樣，是與server端Json格式交互的解析方式，root元素是一個json數組，解析colModel中的元素，而其他則涉及分頁等信息。比如我們在Action中每次返回的對象為PageModule，可定義為：

Java代碼??

public?class?PageModule<T>?extends?JqGridQueryBase?{??

??

????private?static?final?long?serialVersionUID?=?-663611670315885315L;??

????/**?查詢返回結果數據?*/??

????private?List<T>???????????list?????????????=?new?ArrayList<T>();??

?

colModel：?colModel對json數組中對象如何解析填充到表格的cell的設定，包括基本的name、index、width、formater等，具體見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

比如下設置：

• name???：為Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
• index???：設置排序時所使用的索引名稱，這個index名稱會作為sidx參數（prmNames中設置的）傳遞到Server。
• label???：當jqGrid的colNames選項數組為空時，為各列指定題頭。如果colNames和此項都為空時，則name選項值會成為題頭。
• width???：設置列的寬度，目前只能接受以px為單位的數值，默認為150。
• sortable???：設置該列是否可以排序，默認為true。
• search???：設置該列是否可以被列為搜索條件，默認為true。
• resizable???：設置列是否可以變更尺寸，默認為true。
• hidden???：設置此列初始化時是否為隱藏狀態，默認為false。
• formatter???：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、還支持custom的方式

以上個參數含義來自http://blog.csdn.net/jpr1990/article/details/6891115

比如對價格需要加前綴和分割可以如下設定：

Js代碼??

{name:'price',index:'price',?width:80,align:"right",?formatter:'currency',?formatoptions:{decimalSeparator:".",?thousandsSeparator:?",",?decimalPlaces:?2,?prefix:?"$"}},??

支持下拉select的設定：

Js代碼??

{name:'valid',index:'valid',?width:100,align:"center",?formatter:'select',edittype:'select',?editoptions:{value:"0:現貨;1:可配貨;2:無貨"}}??

顯示鏈接：

Js代碼??

{name:'warename',?index:'warename',?width:300,sortable:false,?formatter:'showlink',?formatoptions:{baseLinkUrl:'query.action',?addParam:?'&action=edit'}},??

?

?

?

4、常用方法(methods)

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

jqGrid支持兩種方式調用函數方法：

Java代碼??

jQuery("#grid_id").jqGridMethod(?parameter1,...parameterN?);???

jQuery("#grid_id").jqGrid('method',?parameter1,...parameterN?);??

下面是新的API，推薦使用新的調用方法，也支持鏈式調用,如：

Js代碼??

jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");??

?

?

1、新增{rowid, data, position(first、before、last、after)}

Js代碼??

$("#jqGrid_id").jqGrid("addRowData",?"1"?,{'name':'zhangsan',?'age':?20},?"first"?);??

2、清空grid

Js代碼??

$("#jqGrid_id").jqGrid("clearGridData");????

3、返回當前grid序號

Js代碼??

$("#jqGrid_id").jqGrid('getDataIDs');??

4、根據rowID獲取當前row的值

Js代碼??

$("#jqGrid_id").jqGrid('getRowData',?rowIds[i]);??

5、設置某row值

Js代碼??

$("#jqGrid_id").jqGrid('setRowData',?rowIds[i],?{});??

一個例子：需要對grid中的數據進行循環遍歷獲取、設置、更改 Js代碼??

var?rowIds?=?$("#jqGrid_id").jqGrid('getDataIDs');???

if(rowIds){???

????for(var?i?=?0,?j?=?rowIds.length;?i?<?j;?i++)?{???

????????var?curRowData?=?$("#jqGrid_id").jqGrid('getRowData',?rowIds[i]);???

????????//curRowData?=?{"name1":"value1","name2":"value2","name3":"value3"...}???

????????if(curRowData['name1']?==?""){??

????????????//dosomething???

????????}???

????????//更改:更改name1的值???

????????$.extend(curRowData,?{"name1":"newValue1"})???

????????$("#jqGrid_id").jqGrid('setRowData',?rowIds[i],?curRowData);???

????}???

}??

6、獲取grid參數.

name表示grid的options：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Js代碼??

$("#jqGrid_id").jqGrid('getGridParam','name');???

7、設置grid參數，與上面的方法對應

Js代碼??

$("#jqGrid_id").jqGrid('setGridParam',?'name');??

如下常見需要獲取的參數：

Js代碼??

#獲取總記錄數??

$("#jqGrid_id").jqGrid('getGridParam','records');??

#獲取請求參數??

$("#jqGrid_id").jqGrid('getGridParam','postData');??

#獲取選中的row，返回string??

$("#jqGrid_id").jqGrid("getGridParam","selrow");??

#獲取選中的多個row，返回Array??

$("#jqGrid_id").jqGrid("getGridParam","selarrrow");??

例子：對當前默認請求添加新的請求參數

Js代碼??

var?postData?=?$("#jqGrid_id").jqGrid('getGridParam','postData');?$.extend(postData?,?{"name1":"newValue1"})?$("#jqGrid_id").jqGrid("setGridParam",?{datatype:?"json"?}).trigger("reloadGrid",?[{page:1}]);??

同時，在實際的使用場景中，我們可能是需要選擇通過選擇表單的值再進行查詢：

Js代碼??

$("#queryBtn").bind("click",?function()?{???

????var?sdata?=?{???

????????"ware.warename"?:?$("#warenameId").val(),???

????????"ware.number"?:?$("#numberId").val(),???

????????"ware.valid"?:?$("#validId").val()???

????};???

????var?postData?=?$("#jqGridId").jqGrid("getGridParam",?"postData");???

????$.extend(postData,?sdata);???

????$("#jqGridId").jqGrid("setGridParam",?{search:?true}).trigger("reloadGrid",?[{page:1}]);???

});??

8、刪除

Js代碼??

$("#jqGrid_id").jqGrid("delRowData",?rowid);?//前臺刪除??

? 在使用上述API進行批量刪除時，是根據rowid去刪除指定的行，但是在刪除過程中rowid會導致變化，如果采用下面的方式刪除會導致某些行不能被刪除：

Js代碼??

var?gr?=?$("#jqGrid_id").jqGrid("getGridParam","selarrrow");?//刪除選中的出庫單???

for?(?var?i?=?0,?j?=?gr.length;?i?<?j;?i++)?{???

????$("#jwGrid_id").jqGrid('delRowData',?gr[i]);???

}??

?在網上找到一個解決方案是：

Js代碼??

var?gr?=?$("#jqGrid_id").jqGrid("getGridParam","selarrrow");?//刪除選中的出庫單???

for?(?var?i?=?0,?j?=?gr.length;?i?<?j;?i++)?{???

????$("#jwGrid_id").jqGrid('delRowData',?gr[0]);???

}??

上述API是前端刪除，對于前后臺交互的刪除的API：

Js代碼??

$("#jqGrid_id").jqGrid("delGridRow",?rowid);??

?下面是一個刪除的例子：

Js代碼??

$("#removeBtn").bind("click",?function(){??

????var?gr?=?$("#jqGridId").jqGrid('getGridParam','selrow');??

????if(gr){??

????????var?rowData?=?$("#jqGridId").jqGrid("getRowData",?gr);??

????????$("#jqGridId").jqGrid('delGridRow',?gr?,{??

????????????top:?100,??

????????????left:?400,??

????????????reloadAfterSubmit:false,??

????????????modal:?true,????????????????????????????//模態窗口??

????????????url:?s2web.appURL?+?"jq/del.action",????//覆蓋editUrl??

????????????jqModal:?true,??

????????????beforeSubmit:?function(postData,?formid){//?id=value1,value2,...??

????????????????var?editData?=?{??

????????????????????????"ware.id":?rowData.id??

????????????????};??

????????????????postData?=?$.extend(postData,?editData);????

????????????????console.log(postData);??

????????????????return[true,"success"];???

????????????},??

????????????afterSubmit:?function(xhr,?postData){???//返回[success,?message,?new_id]??

????????????????console.log(postData);???

????????????????if(xhr.responseText?==?"\"1\""){??

????????????????????//alert("保存成功");??

????????????????????return?[true,"保存成功",postData.id];??//message?is?ignored?if?success?is?true??

????????????????}??

????????????????return?[false,"保存失敗",postData.id];??

????????????}??

????????});??

????}else{??

????????alert("請選擇要刪除的數據");??

????}??

});??

?

?5、事件(Event)

作為jqGrid的各種事件屬性，用來監聽相應的事件，如選擇行、完成加載、多選等時候觸發。API參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events，這里還介紹了關聯事件的執行順序：

寫道 Below is the execution order of the events when a ajax request is made?
1、beforeRequest?
2、loadBeforeSend?
3、serializeGridData?
4、loadError (if a error from the request occur - the event from steps 5 till 7 do not execute. If there is no error the event 4. does not execute and we continue to with the step 5.)?
5、beforeProcessing?
6、gridComplete?
7、loadComplete

?下面的例子是在開發中比較關注的onSelectRow和gridComplete事件，完成如下功能：在選中行時獲取當前行的數據并以某種方式查看數據，在列表加載完時計算列表中各個行的某列的合計值等：

Js代碼??

???//設置multiselect?checkbox's?value,設置總的稱重和件數??

???gridComplete:?function(){??

????var?rowIds?=?$("#wmsjQContentTableId").jqGrid('getDataIDs');??

????var?totalWeight?=?0,totalNumber?=?0;??

??????????for(var?i?=?0,?j?=?rowIds.length;?i?<?j;?i++)?{??

?????????????var?curRowData?=?$("#wmsjQContentTableId").jqGrid('getRowData',?rowIds[i]);??

?????????????var?curChk?=?$("#"+rowIds[i]+"").find(":checkbox");??

?????????????curChk.attr('name',?'wmsCheckboxname');??

?????????????curChk.attr('value',?curRowData['outStockCode']);???

?????????????if(curRowData['weight']?!=?""){??

???????????????totalWeight?+=?parseFloat(curRowData['weight']);??

?????????????}??

?????????????if(curRowData['number']?!=?""){??

???????????????totalNumber?+=?parseFloat(curRowData['number']);??

?????????????}??

??????????}??

????????$("#totalWeighId").val(totalWeight);??

????????$("#totalPackNumId").val(totalNumber);??

},??

??

//行選中時更新稱重、件數、出庫單??

onSelectRow:?function(ids){??

????var?rowData?=?$("#wmsjQContentTableId").jqGrid("getRowData",?ids);??

????$("#curWeighId").val(rowData['weight']);??

????$("#packNumId").val(rowData['number']);??

????$("#curWmsOutStockCodeId").val(rowData['outStockCode']);??

}??

考慮如下一種場景，在列表的最后一列一般會有要求操作欄，提供刪除、修改等操作，那么同樣也可以通過gridComplete事件來實現：

Java代碼??

colNames:['商品編號',?'商品名稱',?'單價','采購日期','庫存','狀態','操作'],//表頭??

在colModel中有一列空值占位，注意index不要和json中重復??

{name:'act',????????index:'act',????????width:150}????

?在gridComplete事件中：

Js代碼??

???gridComplete:?function(){??

????var?ids?=?$("#jqGridId").jqGrid('getDataIDs');??

????for(var?i=0,?j=ids.length;?i?<?j;?i++){??

????????var?cl?=?ids[i];??

????????be?=?"<input?style='height:22px;width:40px;'?type='button'?value='編輯'?οnclick=\"$('#jqGridId').editRow('"+cl+"');\"??/>&nbsp;&nbsp;";???

????????//se?=?"<input?style='height:22px;width:40px;'?type='button'?value='保存'?οnclick=\"$('#jqGridId').saveRow('"+cl+"');\"??/>&nbsp;&nbsp;";??

????????se?=?"<input?style='height:22px;width:40px;'?type='button'?value='保存'?οnclick=\"customSaveRow('"+cl+"');\"??/>&nbsp;&nbsp;";???

????????ce?=?"<input?style='height:22px;width:40px;'?type='button'?value='取消'?οnclick=\"$('#jqGridId').restoreRow('"+cl+"');\"?/>";???

????????$("#jqGridId").jqGrid('setRowData',ids[i],?{act:?be?+?se?+?ce});??

????}?????

},??

?

6、其他

凍結行、列

?

jqGrid有提供對column、header、column with group header的凍結，

需要設置兩處：

?

Js代碼??

colModel中的frozen:true??

$("#grid").jqGrid('setFrozenColumns');??

但是jqGrid對凍結的支持并不是那么強大，只能支持依次從左到右凍結，如果中間設置有一個cell沒有設置，那么該row以后的cell即使設置了也不起作用

在官方的DOC中列出了使用限制：

寫道 The following limitations tell you when frozen columns can not be set-up
When TreeGrid is enabled
When SubGrid is enabled
When cellEdit is enabled
When inline edit is used - the frozen columns can not be edit.
When sortable columns are enabled - grid parameter sortable is set to true or is function
When scroll is set to true or 1
When Data grouping is enabled

?動態改變設置：當然這里id、name都是依次從左到右的元素

?$("#changeBtn").bind("click", function() {

Js代碼??

$("#jqGridId").jqGrid('destroyFrozenColumns')??

.jqGrid('setColProp','id',?{frozen:true})??

.jqGrid('setColProp','name',?{frozen:true})??

.jqGrid('setFrozenColumns')??

.trigger('reloadGrid',?[{current:true}]);??

);???

?

?

?

?

?

7、參考以下文章

doc:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
colmodel_options:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
方法
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
事件
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

其他

http://blog.csdn.net/gengv/article/category/648499

http://www.trirand.com/jqgridwiki/doku.php

http://trirand.com/blog/jqgrid/jqgrid.html

from:?http://mj4d.iteye.com/blog/1628851

總結

以上是生活随笔為你收集整理的jqGrid使用整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。