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代碼??
<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主題,需要下載相應(yīng)的主題http://jqueryui.com/themeroller/?找到相應(yīng)的主題下載,如果使用了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中使用,需要兩個(gè)基本的元素
Js代碼??
<table?id="jqGridId" ></table>??? <div?id="pager" ></div>???
然后在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" ,??? ????mtype:?"POST" ,??? ????colNames:['編號(hào)' ,?'作者' ,?'ISBN' ,'重量' ,'描述' ],??? ????colModel:[??? ????????{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' ,??? ????height:?200,??? ????rowNum:?5,??? ????rowList:[5,?10,20,30],??? ????pager:?'#pager2' ,??? ????viewrecords:?true ,??? ?????sortable:?false ,??? ????sortname:?"warename" ,??? ????sortorder:?"desc" ,??? ?? ????caption:"商品列表" ,??? ????rownumbers:?true ,??? ????rownumWidth:?20,??? ????multiselect:?true ,??? ????multiboxonly:?true ,??? ????prmNames?:?{??? ????????page:?"wareDetail.page" ,??? ????????rows:?"wareDetail.rows" ,??? ????????sort:?"wareDetail.sidx" ,??? ????????order:?"wareDetail.sord" ,??? ????????search:?"wareDetail.search" ??? ????},??? ????jsonReader:{??? ????????root:?"list" ,??? ????????page:?"page" ,??? ????????total:?"totalPage" ,??? ????????records:?"totalCount" ,?? ????????repeatitems:?false ,??? ????}??? });??? ?? $("#jqGridId" ).jqGrid('navGrid' ,'#pager2' {edit:false ,add:false ,del:false ,search:false });??
?以上各個(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;?? ?? ?????? ????private ?int ???????????????page;?? ?????? ????private ?int ???????????????rows;?? ?????? ????private ?String????????????search;?? ?????? ????private ?String????????????sidx;?? ????private ?String????????????sord;?? ?? ?????? ????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;?? ?????? ????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]);??? ?????????? ????????if (curRowData['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);???
? 在使用上述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 ,?????????????????????????????? ????????????url:?s2web.appURL?+?"jq/del.action" ,?????? ????????????jqModal:?true ,?? ????????????beforeSubmit:?function (postData,?formid){?? ????????????????var ?editData?=?{?? ????????????????????????"ware.id" :?rowData.id?? ????????????????};?? ????????????????postData?=?$.extend(postData,?editData);???? ????????????????console.log(postData);?? ????????????????return [true ,"success" ];??? ????????????},?? ????????????afterSubmit:?function (xhr,?postData){????? ????????????????console.log(postData);??? ????????????????if (xhr.responseText?==?"\"1\"" ){?? ?????????????????????? ????????????????????return ?[true ,"保存成功" ,postData.id];???? ????????????????}?? ????????????????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代碼??
????? ???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' ]);?? }??
考慮如下一種場(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=\"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ò),歡迎將生活随笔 推薦給好友。