生活随笔
收集整理的這篇文章主要介紹了
jqgrid的函数与操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jqGrid有很多方法函數，用來操作數據或者操作Grid表格本身。jqGrid的方法有兩種調用方式：
$("#grid_id").jqGridMethod( parameter1,...,parameterN );
或者
$("#grid_id").jqGrid('method', parameter1,...,parameterN );
?
首先介紹一下jqGrid的幾個最常用的方法函數，具體的方法API也可以參考官方文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods?）
?
1. getGridParam
?
這個方法用來獲得jqGrid的選項值。它具有一個可選參數name，name即代表著jqGrid的選項名，例如：
[javascript]?view plaincopy
var?id?=?$("#gridTable").jqGrid("getGridParam",?"selrow");??
即可獲得當前選中的行的ID。
?
注：selrow是jqGrid選項之一，默認值是null。這是一個只讀選項，代表最后選中行的ID。如果執行翻頁或者排序后，此選項將被設為null。關于其他選項，后續會有介紹。
?
如果不傳入name參數，則會返回jqGrid整個選項options。
?
?
?
2. getRowData
?
這個方法用來獲得某行的數據。它具有一個rowid參數，jqGrid會根據這個rowid返回對應行的數據，返回的是name:value類型的數組。例如：
[javascript]?view plaincopy
var?getContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?rowData?=?$("#gridTable").jqGrid("getRowData",?selectedId);?? ?????? ????alert("First?Name:?"?+?rowData.firstName);?? };??
?
如果rowid未能被找到，則返回一個空數組；如果未設置rowid參數，則以數組的形式返回Grid的所有行數據。
?
?
?
3. addRowData
?
這個方法用于向Grid中插入新的一行。執行成功返回true，否則返回false。它具有4個參數：
- rowid?：新行的id號；
- data?：新行的數據對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；
- position?：插入的位置（first：表格頂端；last：表格底端；before：srcrowid之前；after：srcrowid之后）；
- srcrowid?：新行將插入到srcrowid指定行的前面或后面。
例如：
[javascript]?view plaincopy
var?addContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?dataRow?=?{??? ????????id?:?99,?? ????????lastName?:?"Zhang",?? ????????firstName?:?"San",?? ????????email?:?"zhang_san@126.com",?? ????????telNo?:?"0086-12345678"?? ????};?? ?????? ????if?(selectedId)?{?? ????????$("#gridTable").jqGrid("addRowData",?99,?dataRow,?"before",?selectedId);?? ?????????? ????}?else?{?? ????????$("#gridTable").jqGrid("addRowData",?99,?dataRow,?"first");?? ?????????? ????}?? };??
?
這個方法可以一次性插入多行，data參數必須是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]這樣的數組形式，而且rowid參數也應該設為data參數對象中代表id的field名稱。不過，此時的rowid不用必須是colModel中的一部分。
例如：
[javascript]?view plaincopy
var?addContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?dataRow?=?[{?????? ????????id?:?99,?? ????????lastName?:?"Zhang",?? ????????firstName?:?"San",?? ????????email?:?"zhang_san@126.com",?? ????????telNo?:?"0086-12345678"?? ????},?? ????{????? ????????id?:?100,?? ????????lastName?:?"Li",?? ????????firstName?:?"Si",?? ????????email?:?"li_si@126.com",?? ????????telNo?:?"0086-12345678"?? ????},?? ????{????? ????????id?:?101,?? ????????lastName?:?"Wang",?? ????????firstName?:?"Wu",?? ????????email?:?"wang_wu@126.com",?? ????????telNo?:?"0086-12345678"?? ????}];?? ?????? ????if?(selectedId)?{?? ????????$("#gridTable").jqGrid("addRowData",?"id",?dataRow,?"before",?selectedId);?? ?????????? ????}?else?{?? ????????$("#gridTable").jqGrid("addRowData",?"id",?dataRow,?"first");?? ?????????? ????}?? };??
?
注：我測試了一下，一次插入多行的情況下，用于設置插入位置的后兩個參數，似乎沒有起作用。插入的幾行數據都被置于Grid的底端。
?
?
?
4. setRowData
這個方法用于為某行數據設置數據值。執行成功返回true，否則返回false。它具有3個參數：
- rowid?：更新數據的行id；
- data?：更新的數據對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個數據對象，不必設置完全，需要更新哪列，就設置哪列的name:value對；
- cssprop?：如果cssprop為String類型，則會使用jQuery的addClass為行增加相應名稱的CSS類；如果為object類型，則會使用html的css屬性，為行添加樣式。如果只想增加css樣式而不更新數據，可以將data參數設為false。
例如：
[javascript]?view plaincopy
var?updateContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?dataRow?=?{?? ????????lastName?:?"Li",?? ????????firstName?:?"Si",?? ????????email?:?"li_si@126.com"??? ????};?? ?????? ????var?cssprop?=?{?? ????????color?:?"#FF0000"?? ????};?? ?????? ????$("#gridTable").jqGrid('setRowData',?selectedId,?dataRow,?cssprop);?? };??
?
?
?
5. delRowData
?
這個方法用于刪除某行數據。執行成功返回true，否則返回false。具有一個參數rowid，代表要刪除的行id。例如：
[javascript]?view plaincopy
var?deleteContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????$("#gridTable").jqGrid('delRowData',?selectedId);?? };??
?
?
?
?
6. setGridParam
?
這個方法與getGridParam對應，用于設置jqGrid的options選項。返回jqGrid對象。參數為{name1:value1,name2: value2…}形式的對象（name來自jqGrid的options選項名）。某些選項在設置之后需要trigger("reloadGrid")，才能顯示出效果。
例如：
[javascript]?view plaincopy
var?changeGridOptions?=?function()?{?? ????$("#gridTable").jqGrid("setGridParam",?{?? ????????rowNum:?50,?? ????????page:?16?? ????}).trigger('reloadGrid');?? };??
?
注：我測試了一下，這個方法對于設置jqGrid的caption選項似乎無效。大概因此有了setCaption方法。
?
?
?
?
7. setGridWidth
?
為Grid動態地設定一個新的寬度。兩個參數：
- new_width?：以px為單位的新寬度值；
- shrink?：作用與jqGrid的shrinkToFit選項相同；如果此參數未設置，則沿用jqGrid的shrinkToFit選項的值。
?
?
?
8. trigger("reloadGrid")
?
根據當前設置，重新載入Grid表格，即意味著向Server發送一個新的請求。此方法只能用于已經構建好的Grid。此外，此方法不會使對colModel所做出的改變生效。應該使用gridUnload來重新載入對colModel的新設置。
?
?
?
9. 其他方法
?
除了以上介紹的的方法外，jqGrid還有其他有用的方法，例如：
addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等
以及增強模塊提供的方法，例如：
filterGrid、GridDestroy、GridUnload、setColProp等。
這些方法的具體用法，或淺顯易懂，或不是非常常用。都可以參考官方文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods?），得到具體指示。
?
?
?
10. 額外的考慮
?
在上面介紹的增刪改數據行的操作中，jqGrid實際上完成的只是客戶端的操作，主要是DOM的更改工作。但是如果傳到Server的請求失敗了，或者沒有得到想要的返回結果，那jqGrid的處理還繼續嗎？會不會和Server端的數據不同步了呢？
這個問題在下一篇中再討論吧。
?
?
?
?
?
注： 本篇中介紹的方法在jqGrid的Demo中也有介紹，但是我覺得還是自己的實例看起來更直觀，更適合自己理解。
附上代碼：
?
JavaScript部分：
[javascript]?view plaincopy
$(function(){?? ?????? ????$("#gridTable").jqGrid({?? ????????url:?"jqGrid01.action",?? ????????datatype:?"json",?? ????????mtype:?"GET",?? ????????height:?350,?? ????????width:?600,?? ????????colModel:?[?? ??????????????{name:"id",index:"id",label:"編碼",width:40},???? ??????????????{name:"lastName",index:"lastName",label:"姓",width:80,sortable:false},?? ??????????????{name:"firstName",index:"firstName",label:"名",width:80,sortable:false},?? ??????????????{name:"email",index:"email",label:"電子郵箱",width:160,sortable:false},?? ??????????????{name:"telNo",index:"telNo",label:"電話",width:120,sortable:false}?? ????????],?? ????????viewrecords:?true,?? ????????rowNum:?15,?? ????????rowList:?[15,50,100],?? ????????prmNames:?{search:?"search"},?? ????????jsonReader:?{?? ????????????root:"gridModel",?? ????????????records:?"record",?? ????????????repeatitems?:?false?? ????????},?? ????????pager:?"#gridPager",?? ????????caption:?"聯系人列表",?? ????????hidegrid:?false,?? ????????shrikToFit:?true?? ????});?? });?? var?echoSelRow?=?function()?{?? ????var?id?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????alert("當前選中行ID："?+?id);?? };?? var?getContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?rowData?=?$("#gridTable").jqGrid("getRowData",?selectedId);?? ?????? ????alert("First?Name:?"?+?rowData.firstName);?? };?? var?addContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?dataRow?=?{??? ????????id?:?99,?? ????????lastName?:?"Zhang",?? ????????firstName?:?"San",?? ????????email?:?"zhang_san@126.com",?? ????????telNo?:?"0086-12345678"?? ????};?? ?????? ????if?(selectedId)?{?? ????????$("#gridTable").jqGrid("addRowData",?99,?dataRow,?"before",?selectedId);?? ?????????? ????}?else?{?? ????????$("#gridTable").jqGrid("addRowData",?99,?dataRow,?"first");?? ?????????? ????}?? };?? var?updateContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????var?dataRow?=?{?? ????????lastName?:?"Li",?? ????????firstName?:?"Si",?? ????????email?:?"li_si@126.com"??? ????};?? ?????? ????var?cssprop?=?{?? ????????color?:?"#FF0000"?? ????};?? ?????? ????$("#gridTable").jqGrid('setRowData',?selectedId,?dataRow,?cssprop);?? };?? var?deleteContact?=?function()?{?? ????var?selectedId?=?$("#gridTable").jqGrid("getGridParam",?"selrow");?? ?????? ????$("#gridTable").jqGrid('delRowData',?selectedId);?? };?? var?changeGridOptions?=?function()?{?? ????$("#gridTable").jqGrid("setGridParam",?{?? ????????rowNum:?50,?? ????????page:?16?? ????}).trigger('reloadGrid');?? ?????? ????$("#gridTable").jqGrid("setCaption",?"Contact?List").trigger('reloadGrid');?? ?????? ????alert($("#gridTable").jqGrid("getGridParam",?"caption"));?? ????alert($("#gridTable").jqGrid("getGridParam",?"rowNum"));?? };?? var?resetWidth?=?function()?{?? ????$("#gridTable").jqGrid("setGridWidth",?300,?false);?? };??
?
?
html部分：
[xhtml]?view plaincopy
<!DOCTYPE?html?? PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?? <html?xmlns="http://www.w3.org/1999/xhtml"?xml:lang="zh-CN"?lang="zh-CN">?? ????<head>?? ????????<title>jqGrid02</title>?? ????????<link?rel="stylesheet"?type="text/css"?media="screen"?href="../css/themes/aero/jquery-ui-1.8.1.custom.css"?mce_href="css/themes/aero/jquery-ui-1.8.1.custom.css"?/>?? ????????<link?rel="stylesheet"?type="text/css"?media="screen"?href="../css/themes/aero/ui.jqgrid.custom.css"?mce_href="css/themes/aero/ui.jqgrid.custom.css"?/>?? ?????????? ????????<mce:script?type="text/javascript"?src="../js/jquery-1.4.2.min.js"?mce_src="js/jquery-1.4.2.min.js"></mce:script>?? ????????<mce:script?src="../js/jquery-ui-1.8.1.custom.min.js"?mce_src="js/jquery-ui-1.8.1.custom.min.js"?type="text/javascript"></mce:script>?? ????????<mce:script?src="../js/i18n/grid.locale-zh-CN.js"?mce_src="js/i18n/grid.locale-zh-CN.js"?type="text/javascript"></mce:script>?? ????????<mce:script?src="../js/jquery.jqGrid.min.js"?mce_src="js/jquery.jqGrid.min.js"?type="text/javascript"></mce:script>?? ?????????? ????????<mce:script?src="js/jqGrid02.js"?mce_src="js/jqGrid02.js"?type="text/javascript"></mce:script>???? ????</head>?? ????<body>?? ????????<h3>?? ????????????jqGrid測試?02?? ????????</h3>?? ????????<div>?? ????????????<table?id="gridTable"></table>?? ????????????<div?id="gridPager"></div>?? ????????</div>?? ?????????? ????????<br?/>?? ?????????? ????????<div>?? ????????????<button?onclick="echoSelRow()">當前行ID</button>?? ????????????<button?onclick="getContact()">當前聯系人</button>?? ????????????<button?onclick="addContact()">添加行</button>?? ????????????<button?onclick="updateContact()">修改行</button>?? ????????????<button?onclick="deleteContact()">刪除行</button>?? ????????????<button?onclick="changeGridOptions()">改變Grid選項</button>?? ????????????<button?onclick="resetWidth()">改變Grid寬度</button>?? ????????</div>?? ????</body>?? </html>??
?
?
from:?http://blog.csdn.net/fdc_messenger/article/details/7323194
總結
以上是生活随笔為你收集整理的jqgrid的函数与操作的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
