上一篇中，Jqgrid已經可以從服務端獲得數據，並顯示在Grid表格中了。下面說一下，如何操作表格及其數據。
$(“#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的選項名，如果不傳入name參數，則會返回 Jqgrid整個選項options。例如：
|
1
2
3
4
5
6
|
var
id = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
//獲得選中行的ID
var
sort = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"sortname"
);
//獲得排序的字段
var
page = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"page"
);
//獲得當前的頁數
var
row = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"rowNum"
);
//獲得當前頁的行數
var
count = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"records"
);
//獲得總記錄數
var
rows = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selarrrow"
);
//可以多選時，返回選中行的ID
|
2. getRowData
這個方法用來獲得某行的數據。它具有一個rowid參數，Jqgrid會根據這個rowid返回對應行的數據，返回的是name:value類型的數組。如果rowid未能被找到，則返回一個空數組；如果未設置rowid參數，則以數組的形式返回Grid的所有行數據。例如：
|
1
2
3
|
var
getRowdata =
function
() {
var
selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
var
rowData = $(
"#gridTable"
).jqGrid(
"getRowData"
, selectedId);
|
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指定行的前面或后面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
addStudent=
function
() {
var
selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
var
dataRow = {
id : 99,
lastName :
"Zhang"
,
firstName :
"San"
,
email :
"<a href="
mailto:zhang_san@126.com
">zhang_san@126.com</a>"
,
telNo :
"0086-12345678"
};
if
(selectedId) {
$(
"#gridTable"
).jqGrid(
"addRowData"
, 99, dataRow,
"before"
, selectedId);
}
else
{
$(
"#gridTable"
).jqGrid(
"addRowData"
, 99, dataRow,
"first"
);
}
};
|
- rowid：更新數據的行id；
- data：更新的數據對象，形式為{name1:value1,name2: value2…}，其中name為colModel中定義的列名稱name；這個數據對象，不必設置完全，需要更新哪列，就設置哪列的name:value對；
- cssprop：如果cssprop為String類型，則會使用jQuery的addClass為行增加相應名稱的CSS類；如果為object類型，則會使用html的css屬性，為行添加樣式。如果只想增加css樣式而不更新數據，可以將data參數設為false。
例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
updateStudent =
function
() {
var
selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
var
dataRow = {
lastName :
"Li"
,
firstName :
"Si"
,
email :
"<a href="
mailto:li_si@126.com
">li_si@126.com</a>"
};
var
cssprop = {
color :
"#FF0000"
};
$(
"#gridTable"
).jqGrid(
'setRowData'
, selectedId, dataRow, cssprop);
};
|
5. delRowData
這個方法用於刪除某行數據。執行成功返回true，否則返回false。具有一個參數rowid，代表要刪除的行id。例如：
|
1
2
3
4
|
var
deleteStudent =
function
() {
var
selectedId = $(
"#gridTable"
).jqGrid(
"getGridParam"
,
"selrow"
);
$(
"#gridTable"
).jqGrid(
'delRowData'
, selectedId);
};
|
6. trigger(“reloadGrid”)
根據當前設置，重新載入Grid表格，即意味着向服務端重新發送一個新的請求。此方法只能用於已經構建好的Grid。此外，此方法不會使對colModel所做出的改變生效。應該使用gridUnload來重新載入對colModel的新設置。例如:
|
1
2
3
4
5
|
$(
"#gridTable"
).jqGrid(
"setGridParam"
, {
datatype :
"json"
,
search :
true
,
mtype :
"post"
}).trigger(
"reloadGrid"
);
|
7. 其他方法
除了以上介紹的的方法外，jqGrid還有其他有用的方法，例如：addJSONData、clearGridData、hideCol、resetSelection、setCaption、setGridHeight、setLabel、showCol等以及增強模塊提供的方法，例如：filterGrid、GridDestroy、GridUnload、setColProp等。這些方法的具體用法，或淺顯易懂，或不是非常常用。都可以參考官方文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods），得到具體指示。