當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jqGrid使用整理

發(fā)布時(shí)間：2025/3/21 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jqGrid使用整理小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

jqGrid是一款處理表格展現(xiàn)的jQuery插件，支持分頁、滾動(dòng)加載、搜索、鎖定、拖動(dòng)等一系列對(duì)表格的常規(guī)操作。以下是最近項(xiàng)目中實(shí)踐jqGrid的整理

1、引入到項(xiàng)目中來

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

Js代碼??

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

Js代碼??

2、在頁面中使用

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

Js代碼??

<table?id="jqGridId"></table>?//這個(gè)是必須的???

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

然后在js中

Js代碼??

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

這樣就是一個(gè)最基本的設(shè)置，重點(diǎn)是在這里的options上，包括基本參數(shù)設(shè)定和函數(shù)。具體可見官網(wǎng)的文檔：

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

?3、參數(shù)(options)

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

下面一個(gè)例子，羅列了常用的參數(shù)，并對(duì)參數(shù)進(jìn)行了說明：

Js代碼??

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

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

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

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

????colNames:['編號(hào)',?'作者',?'ISBN','重量','描述'],?//表頭???

????colModel:[?//這里會(huì)根據(jù)index去解析jsonReader中root對(duì)象的屬性，填充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',?//數(shù)字?&?'auto','100%'???

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

????rowNum:?5,?//每頁記錄數(shù)???

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

????pager:?'#pager2',?//分頁標(biāo)簽divID???

????viewrecords:?true,?//顯示記錄數(shù)信息，如果這里設(shè)置為false,下面的不會(huì)顯示?recordtext:?"第{0}到{1}條,?共{2}條記錄",?//默認(rèn)顯示為{0}-{1}?共{2}條?scroll:?false,?//滾動(dòng)翻頁，設(shè)置為true時(shí)翻頁欄將不顯示??

????/**這里是排序的默認(rèn)設(shè)置，這些值會(huì)根據(jù)列表header點(diǎn)擊排序時(shí)覆蓋*/?sortable:?false,???

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

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

????caption:"商品列表",?//顯示查詢結(jié)果表格標(biāo)題???

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

????rownumWidth:?20,?//設(shè)置顯示序號(hào)的寬度，默認(rèn)為25???

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

????multiboxonly:?true,?//在點(diǎn)擊表格row時(shí)只支持單選，只有當(dāng)點(diǎn)擊checkbox時(shí)才多選，需要multiselect=true是有效???

????prmNames?:?{?//如當(dāng)前查詢實(shí)體為ware，這些可以在查詢對(duì)象的superObject中設(shè)定???

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

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

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

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

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

????},???

????jsonReader:{?//server返回Json解析設(shè)定???

????????root:?"list",?//對(duì)于json中數(shù)據(jù)列表???

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

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

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

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

????}???

});???

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

?以上各個(gè)參數(shù)的含義已經(jīng)做了說明，具體可見上面文檔的詳細(xì)介紹。

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

Java代碼??

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

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

????/**?當(dāng)前頁面?*/??

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

????/**?每頁的記錄數(shù)?*/??

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

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

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

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

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

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

????/**?分頁信息:總記錄數(shù)?*/??

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

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

Java代碼??

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

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

????/**?查詢返回結(jié)果數(shù)據(jù)?*/??

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

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

比如下設(shè)置：

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

以上個(gè)參數(shù)含義來自http://blog.csdn.net/jpr1990/article/details/6891115

比如對(duì)價(jià)格需要加前綴和分割可以如下設(shè)定：

Js代碼??

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

支持下拉select的設(shè)定：

Js代碼??

{name:'valid',index:'valid',?width:100,align:"center",?formatter:'select',edittype:'select',?editoptions:{value:"0:現(xiàn)貨;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支持兩種方式調(diào)用函數(shù)方法：

Java代碼??

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

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

下面是新的API，推薦使用新的調(diào)用方法，也支持鏈?zhǔn)秸{(diào)用,如：

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、返回當(dāng)前grid序號(hào)

Js代碼??

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

4、根據(jù)rowID獲取當(dāng)前row的值

Js代碼??

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

5、設(shè)置某row值

Js代碼??

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

一個(gè)例子：需要對(duì)grid中的數(shù)據(jù)進(jìn)行循環(huán)遍歷獲取、設(shè)置、更改 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參數(shù).

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

Js代碼??

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

7、設(shè)置grid參數(shù)，與上面的方法對(duì)應(yīng)

Js代碼??

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

如下常見需要獲取的參數(shù)：

Js代碼??

#獲取總記錄數(shù)??

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

#獲取請(qǐng)求參數(shù)??

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

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

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

#獲取選中的多個(gè)row，返回Array??

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

例子：對(duì)當(dāng)前默認(rèn)請(qǐng)求添加新的請(qǐng)求參數(shù)

Js代碼??

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

同時(shí)，在實(shí)際的使用場(chǎng)景中，我們可能是需要選擇通過選擇表單的值再進(jìn)行查詢：

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);?//前臺(tái)刪除??

? 在使用上述API進(jìn)行批量刪除時(shí)，是根據(jù)rowid去刪除指定的行，但是在刪除過程中rowid會(huì)導(dǎo)致變化，如果采用下面的方式刪除會(huì)導(dǎo)致某些行不能被刪除：

Js代碼??

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

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

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

}??

?在網(wǎng)上找到一個(gè)解決方案是：

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是前端刪除，對(duì)于前后臺(tái)交互的刪除的API：

Js代碼??

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

?下面是一個(gè)刪除的例子：

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,????????????????????????????//模態(tài)窗口??

????????????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("請(qǐng)選擇要?jiǎng)h除的數(shù)據(jù)");??

????}??

});??

?5、事件(Event)

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

寫道 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

?下面的例子是在開發(fā)中比較關(guān)注的onSelectRow和gridComplete事件，完成如下功能：在選中行時(shí)獲取當(dāng)前行的數(shù)據(jù)并以某種方式查看數(shù)據(jù)，在列表加載完時(shí)計(jì)算列表中各個(gè)行的某列的合計(jì)值等：

Js代碼??

???//設(shè)置multiselect?checkbox's?value,設(shè)置總的稱重和件數(shù)??

???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);??

},??

//行選中時(shí)更新稱重、件數(shù)、出庫單??

onSelectRow:?function(ids){??

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

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

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

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

}??

考慮如下一種場(chǎng)景，在列表的最后一列一般會(huì)有要求操作欄，提供刪除、修改等操作，那么同樣也可以通過gridComplete事件來實(shí)現(xiàn)：

Java代碼??

colNames:['商品編號(hào)',?'商品名稱',?'單價(jià)','采購日期','庫存','狀態(tài)','操作'],//表頭??

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

{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+"');\"??/>  ";???

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

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

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

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

????}?????

},??

6、其他

凍結(jié)行、列

jqGrid有提供對(duì)column、header、column with group header的凍結(jié)，

需要設(shè)置兩處：

Js代碼??

colModel中的frozen:true??

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

但是jqGrid對(duì)凍結(jié)的支持并不是那么強(qiáng)大，只能支持依次從左到右凍結(jié)，如果中間設(shè)置有一個(gè)cell沒有設(shè)置，那么該row以后的cell即使設(shè)置了也不起作用

在官方的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

?動(dòng)態(tài)改變?cè)O(shè)置：當(dāng)然這里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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

JqGrid

上一篇：通过索引优化含ORDER BY的MySQ
下一篇： JQGrid教程