如何獲取jqGrid中選擇的行的數據
如何獲取jqGrid中選擇的行的數據？
下面可以獲取選擇一行的id，如果你選擇多行，那下面的id是最後選擇的行的id：
var id=$(‘#gridTable’).jqGrid(‘getGridParam’,'selrow’);
如果想要獲取選擇多行的id，那這些id便封裝成一個id數組，那可以使用以下：
var ids=$(‘#gridTable’).jqGrid(‘getGridParam’,'selarrrow’);
如果想獲取選擇的行的數據，只要傳入rowId即可，如下：
var rowData = $(“#gridTable”).jqGrid(‘getRowData’,rowId);
而這個rowData是一個對象，如果要獲取選擇的行的這個對象的屬性值，如name的值，需如下：
var rowName=rowData.name;
當然你這個對象得有name這個屬性才行。
我知道選中一行可以用這樣獲得:
var selectedId = $("#manager_list").jqGrid("getGridParam", "selrow");
var rowData = $("#manager_list").jqGrid("getRowData", selectedId);
var selectedIds = $("#manager_list").jqGrid("getGridParam", "selarrrow");
jqgrid設置某行選中$("#mygrid").setSelection(1)
1.獲得當前列表行數：$("#gridid").getGridParam("reccount");
2.獲取選中行數據（json）：$("#gridid").jqGrid('getRowData', id);
3.刷新列表:$(refreshSelector).jqGrid('setGridParam',{ url: ''), postData: ''}).trigger('reloadGrid');
4.選中行：$("#jqGrid").setSelection("1",true); （Toggles a selection of the row withid = rowid; if onselectrow is true (the default) then the eventonSelectRow is launched, otherwise it is not.）//true:重新加載表格數據, false:不重新加載表格數據
5.重置選中行：$("#jqgrid").resetSelection();//Resets (unselects) the selected row(s). Also works in multiselect mode.
6.清除：$("#jqgrid").clearGridData(); //Clears the currently loaded data from grid. If the clearfooter parameter isset to true, the method clears the data placed on the footer row.
7. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);
//This method canchange the content of particular cell and can set class or style properties.Where:
rowid the id of the row,
colname the name of the column (this parameter can be a number (the indexof the column) beginning from 0
data the content that can be put into the cell. If empty string thecontent will not be changed
class if class is string then we add a class to the cell using addClass;if class is an array we set the new css properties via css
properties sets the attribute properies of the cell,
forceup If the parameter is set totrue we perform update of the cell instead that the value is empty
8.獲取選中行ID
var rowid =$("#jqgrid").jqGrid('getGridParam','selrow');
var rowid =$("#searchResultList").getGridParam("selrow");
var rowData = $("#searchResultList").getRowData(rowid); /根據行ID，獲取選中行的數據(根據)
=================重點講解================
1.1 prmNames選項
prmNames是jqGrid的一個重要選項，用於設置jqGrid將要向Server傳遞的參數名稱。其默認值爲：
1. prmNames : {
2. page:"page", // 表示請求頁碼的參數名稱
3. rows:"rows", // 表示請求行數的參數名稱
4. sort: "sidx", // 表示用於排序的列名的參數名稱
5. order: "sord", // 表示採用的排序方式的參數名稱
6. search:"_search", // 表示是否是搜索請求的參數名稱
7. nd:"nd", // 表示已經發送請求的次數的參數名稱
8. id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱
9. oper:"oper", //operation參數名稱（我暫時還沒用到）
10. editoper:"edit", // 當在edit模式中提交數據時，操作的名稱
11. addoper:"add", // 當在add模式中提交數據時，操作的名稱
12. deloper:"del", // 當在delete模式中提交數據時，操作的名稱
13. subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱
14. npage: null,
15. totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal
16. }
可以通過這個選項來自定義當向Server發送請求時，默認發送的參數名稱。
這個參數很重要也很有用，正是通過這個參數，可以方便的改變默認的request的參數，以符合Server端的需要。比如在prmNames中search默認的值爲"_search"，這在Struts2的Action中不太方便命名成員變量和getter/
setter。因此可以使用 prmNames:{search: 'search'} 來改變這一默認值爲"search"，這在Struts2的Action對象中就很好設置getter/
setter了，即getSearch()和setSearch()。當然其他名字也是可以的。
1.2 jsonReader選項
jsonReader是jqGrid的一個重要選項，用於設置如何解析從Server端發回來的json數據。其默認值爲：
1. jsonReader : {
2. root: "rows", // json中代表實際模型數據的入口
3. page: "page", // json中代表當前頁碼的數據
4. total: "total", // json中代表頁碼總數的數據
5. records: "records", // json中代表數據行總數的數據
6. repeatitems: true, // 如果設爲false，則jqGrid在解析json時，會根據name來搜索對應的數據元素（即可以json中元素可以不按順序）；而所使用的name是來自於colModel中的name設定。
7. cell: "cell",
8. id: "id",
9. userdata: "userdata",
10. subgrid: {
11. root:"rows",
12. repeatitems: true,
13. cell:"cell"
14. }
15. }
可以這樣理解，prmNames設置瞭如何將Grid所需要的參數傳給Server，而jsonReader設置瞭如何去解析從Server端傳回來的json數據。如果沒有設置jsonReader的話，jqGrid將會根據默認的設置來解析json數據，並顯示在表格裏。但如果傳回來的json數據，不太符合默認設置（比如內部的結構名不太一樣），那麼就有必要修改這一設置。比如：
1. jsonReader: {
2. root:"gridModel",
3. page: "page",
4. total: "total",
5. records: "record",
6. repeatitems: false
7. }
注1：據其他網友的文章，如果設置repeatitems爲false，不但數據可以亂序，而且不用每個數據元素都要具備，用到哪個找到哪個就可以了。實驗卻是如此。
注2：cell、id在repeatitems爲true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以適用另一種json結構。援引文檔中的例子：
repeatitems爲true時：
1. jQuery("#gridid").jqGrid({
2. ...
3. jsonReader : {
4. root:"invdata",
5. page: "currpage",
6. total: "totalpages",
7. records: "totalrecords"
8. },
9. ...
10. });
json結構爲：
1. {
2. "totalpages": "xxx",
3. "currpage": "yyy",
4. "totalrecords": "zzz",
5. "invdata" : [
6. {"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持對應
7. {"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
8. ...
9. ]
10. }
repeatitems爲false時：
1. jQuery("#gridid").jqGrid({
2. ...
3. jsonReader : {
4. root:"invdata",
5. page: "currpage",
6. total: "totalpages",
7. records: "totalrecords",
8. repeatitems: false,
9. id: "0"
10. },
11. ...
12. });
json結構爲：
1. {
2. "totalpages" : "xxx",
3. "currpage" : "yyy",
4. "totalrecords" : "zzz",
5. "invdata" : [
6. {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax":"cell13", "total" :"1234", "note" :"somenote"}, //數據中需要各列的name，但是可以不按列的順序
7. {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax":"cell23", "total" :"2345", "note" :"some note"},
8. ...
9. ]
10. }
2. colModel的重要選項
和jqGrid一樣colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這裏先只說說最基本的。
· 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、number等（具體參見文檔 ）。
3. 第一個實例
3.1 服務器端
用於提供數據的Action。爲了可以複用這種專門接受jqGrid傳來參數的Action，我抽象出一個基本類。具體代碼如下：
1. package cn.gengv.struts2ex.jqGrid;
2.
3. import java.util.Collections;
4. import java.util.List;
5. import com.opensymphony.xwork2.ActionSupport;
6.
7. @SuppressWarnings("serial")
8. public abstract class JqGridBaseAction<T> extends ActionSupport{
9. // 和jqGrid組件相關的參數屬性
10. private List<T>gridModel = Collections.emptyList();
11. private Integerrows = 0;
12. private Integerpage = 0;
13. private Integertotal = 0;
14. private Integerrecord = 0;
15. private Stringsord;
16. private Stringsidx;
17. private Stringsearch;
18.
19. public abstract int getResultSize();
20.
21. public abstract List<T>listResults(int from, int length);
22.
23. public StringrefreshGridModel() {
24. try {
25. List<T> results = Collections.emptyList();
26. record = this.getResultSize();
27. int from =rows * (page - 1);
28. int length =rows;
29. results = this.listResults(from,length);
30. this.setGridModel(results);
31. total = (int) Math.ceil((double) record / (double)rows);
32. return SUCCESS;
33. } catch (Exceptione) {
34. e.printStackTrace();
35. this.addActionError(e.getMessage());
36. return ERROR;
37. }
38. }
39.
40. public List<T>getGridModel() {
41. return gridModel;
42. }
43. public void setGridModel(List<T>gridModel) {
44. this.gridModel =gridModel;
45. }
46. public IntegergetRows() {
47. return rows;
48. }
49. public void setRows(Integerrows) {
50. this.rows = rows;
51. }
52. public IntegergetPage() {
53. return page;
54. }
55. public void setPage(Integerpage) {
56. this.page = page;
57. }
58. public IntegergetTotal() {
59. return total;
60. }
61. public void setTotal(Integertotal) {
62. this.total = total;
63. }
64. public IntegergetRecord() {
65. return record;
66. }
67. public void setRecord(Integerrecord) {
68. this.record = record;
69. }
70. public StringgetSord() {
71. return sord;
72. }
73. public void setSord(Stringsord) {
74. this.sord = sord;
75. }
76. public String getSidx(){
77. return sidx;
78. }
79. public void setSidx(Stringsidx) {
80. this.sidx = sidx;
81. }
82. public StringgetSearch() {
83. return search;
84. }
85. public void setSearch(Stringsearch) {
86. this.search = search;
87. }
88. }
說明：
· 其中的成員變量對應着jqGrid的prmNames和jsonReader中的設置。
|
成員變量 |
對應 prmNames |
對應 jsonReader |
註釋 |
|
rows |
rows |
- |
每頁中現實的記錄行數 |
|
search |
search |
- |
是否是用於查詢的請求 |
|
sidx |
sort |
- |
用於排序的列名 |
|
sord |
order |
- |
排序的方式 |
|
page |
page |
page |
當前頁碼 |
|
gridModel |
- |
root |
用於得到實際數據的數組名稱 |
|
total |
- |
total |
總頁數 |
|
record |
- |
records |
總記錄數 |
· refreshGridModel()方法中，主要工作就是爲gridModel、record、total賦值，這些值也將會傳回客戶端。
具體的一個實現類：
1. package cn.gengv.struts2ex.jqGrid;
2. import java.util.Collections;
3. import java.util.List;
4. @SuppressWarnings("serial")
5. public class ListContactsAction extends JqGridBaseAction<Contact>{
6.
7. private ContactServicecontactService;
8.
9. @Override
10. public Stringexecute() {
11. return this.refreshGridModel();
12. }
13.
14. @Override
15. public int getResultSize(){
16. return this.contactService.queryResultsCount();
17. }
18.
19. @Override
20. public List<Contact>listResults(int from, int length){
21. List<Contact> results = Collections.emptyList();
22.
23. results = this.contactService.queryByPage(from,length);
24.
25. return results;
26. }
27. public void setContactService(ContactServicecontactService) {
28. this.contactService =contactService;
29. }
30.
31. }
而在struts.xml中，應按如下設置配置action：
1. <action name="jqGrid01" class="cn.gengv.struts2ex.jqGrid.ListContactsAction">
2. <result name="success" type="json">
3. <param name="includeProperties">
4. ^gridModel/[/d+/]/./w+,
5. rows, page, total, record
6. </param>
7. <param name="noCache">true</param>
8. <param name="ignoreHierarchy">false</param>
9. </result>
10. </action>
3.2 客戶端（瀏覽器）
javascript部分：
1. $(function(){
2. // 配置jqGrid組件
3. $("#gridTable").jqGrid({
4. url: "jqGrid01.action",
5. datatype: "json",
6. mtype: "GET",
7. height: 350,
8. autowidth: true,
9. colModel: [
10. {name:"id",index:"id",label:"ID",width:40},
11. {name:"lastName",index:"lastName",label:"Last Name",width:80,sortable:false},
12. {name:"firstName",index:"firstName",label:"First Name",width:80,sortable:false},
13. {name:"email",index:"email",label:"E-mail",width:160,sortable:false},
14. {name:"telNo",index:"telNo",label:"Tel No",width:120,sortable:false}
15. ],
16. viewrecords: true,
17. rowNum: 15,
18. rowList: [15,50,100],
19. prmNames: {search: "search"}, //(1)
20. jsonReader: {
21. root:"gridModel", //(2)
22. records: "record", //(3)
23. repeatitems : false //(4)
24. },
25. pager: "#gridPager",
26. caption: "聯繫人列表",
27. hidegrid: false
28. });
29. });
其中主要的選項在開頭已經介紹過了，另外需要說明以下幾點：
1、在位置(1)處，爲了配合Server端的Action類中的成員變量命名，將prmNames中search對應的“_search”更改爲“search”。
2、在位置(2)(3)處，爲了配合Server端的Action類中的成員變量命名，將jsonReader中root對應的“rows”更改爲“gridModel”，將records對應的“records”更改爲“record”。
在後面的request和response解析中，就可以看到這些更改的作用。
html部分：
要想順利的使用jqGrid，需要想頁面中引入6個文件，其中4個js文件，2個css文件。它們分別是：
· jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）
· ui.jqgrid.custom.css（專用於jqGrid界面的CSS文件）
· jquery-1.4.2.min.js（jQuery的核心）
· jquery-ui-1.8.1.custom.min.js（用於支持jQuery UI界面）
· grid.locale-zh-CN.js（針對jqGrid的locale設置，根據locale不同，選擇不同的尾綴）
· jquery.jqGrid.min.js（jqGrid的核心，可以到jqGrid網站，根據需求選擇模塊下載）
注 ：jqGrid的官方包中原本針對中文的locale js文件是grid.locale-cn.js，但是裏面的某些設置，並沒有做到完全中文化，因此我從Struts2-jQuery插件中分離出grid.locale-zh-CN.js和jquery.ui.datepicker-zh-CN.min.js這兩個文件以備後用。說起來這兩個文件中，針對中文的設置還是不錯的。
引入這6個文件後，創建jqGrid的工作就交給上面寫的javascript代碼來完成了。
1. <!DOCTYPE html
2. PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
5. <head>
6. <title>jqGrid01</title>
7. <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" />
8. <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" />
9.
10. <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js"mce_src="js/jquery-1.4.2.min.js"></mce:script>
11. <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>
12. <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
13. <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js"type="text/javascript"></mce:script>
14.
15. <mce:script src="js/jqGrid01.js" mce_src="js/jqGrid01.js" type="text/javascript"></mce:script>
16. </head>
17. <body>
18. <h2>
19. jqGrid測試 01
20. </h2>
21. <div>
22. <table id="gridTable"></table>
23. <div id="gridPager"></div>
24. </div>
25. </body>
26. </html>
HTML中的代碼，異常簡潔。
3.3 整個流程
通過Firebug監測request和response就可以看出Server和瀏覽器之間的數據交互。當打開頁面的時候，jqGrid初始化，會向Server發送url中定義的request，並傳遞參數。如下：
http://localhost:8085/Hare/jqGridTest/jqGrid01.action?search=false&nd=1278331032140&rows=15&page=1&sidx=&sord=asc
jqGrid會根據prmNames中的定義，向Server傳遞參數，例如將jqGrid選項中rowNum的值，作爲參數rows傳遞到Server。
由於我將prmNames中的search設爲“search”，所以參數裏表中出現了這個參數；否則仍會根據原來的默認值，出現“_search”參數。
再看看response，Server發送來的json數據，格式是這樣的：
1. {
2. "gridModel": [
3. {
4. "address": "ADDR-yjfrot4i008toqlrl4dfq9",
5. "email": "[email protected]",
6. "firstName": "FN-gn7po9c9m",
7. "fullName": "LN-3h6d1qFN-gn7po9c9m",
8. "id": 23016,
9. "idCardNo": "CARD-28ew6dekrv9g8dml4n",
10. "lastName": "LN-3h6d1q",
11. "nationality": "NAT-6z1xhty2",
12. "telNo":: "TEL-x3i4a625i"
13. },
14. {
15. "address": "ADDR-9zeiasrr",
16. "email": "[email protected]",
17. "firstName": "FN-8mwhw7n",
18. "fullName": "LN-yaontkFN-8mwhw7n",
19. "id": 23015,
20. "idCardNo": "CARD-gqqbd9s4zjexj05sus",
21. "lastName": "LN-yaontk",
22. "nationality": "NAT-0phliht",
23. "telNo":: "TEL-jf4c31"
24. },
25. {
26. "address": "ADDR-o4ml00d98j7xgktl",
27. "email": "[email protected]",
28. "firstName": "FN-etzsxbaq4",
29. "fullName": "LN-uedrek8FN-etzsxbaq4",
30. "id": 23014,
31. "idCardNo": "CARD-md9bcyef7wvcc7om6b",
32. "lastName": "LN-uedrek8",
33. "nationality": "NAT-okbb5",
34. "telNo":: "TEL-pp0d00"
35. },
36. {
37. "address": "ADDR-obzar7v7z58uux",
38. "email": "[email protected]",
39. "firstName": "FN-f1qnbw0x",
40. "fullName": "LN-20ug4vxfcFN-f1qnbw0x",
41. "id": 23013,
42. "idCardNo": "CARD-kzil6hhtpo68izim0b",
43. "lastName": "LN-20ug4vxfc",
44. "nationality": "NAT-dxidrf",
45. "telNo":: "TEL-eug8ydessk"
46. },
47. {
48. "address": "ADDR-r7954tumxw133a9os90l",
49. "email": "[email protected]",
50. "firstName": "FN-pw1yl8ux",
51. "fullName": "LN-nk7qg6byFN-pw1yl8ux",
52. "id": 23012,
53. "idCardNo": "CARD-0cx02jpey6nivhkr29",
54. "lastName": "LN-nk7qg6by",
55. "nationality": "NAT-85tl0a",
56. "telNo":: "TEL-4aa404"
57. },
58. {
59. "address": "ADDR-jxmudykwu7kcu",
60. "email": "[email protected]",
61. "firstName": "FN-cjxxxds3",
62. "fullName": "LN-3iviu7oFN-cjxxxds3",
63. "id": 23011,
64. "idCardNo": "CARD-9evl3ul16uldvjango",
65. "lastName": "LN-3iviu7o",
66. "nationality": "NAT-v2gnaa9",
67. "telNo":: "TEL-gzbn1w"
68. },
69. {
70. "address": "ADDR-9xsk62kmdidc",
71. "email": "[email protected]",
72. "firstName": "FN-iqygy07ku",
73. "fullName": "LN-3mrxkiFN-iqygy07ku",
74. "id": 23010,
75. "idCardNo": "CARD-ccypafwru43cqyjo62",
76. "lastName": "LN-3mrxki",
77. "nationality": "NAT-qjpvfa",
78. "telNo":: "TEL-2bqxde"
79. },
80. {
81. "address": "ADDR-t8dizyumbedgbd0u8ml",
82. "email": "[email protected]",
83. "firstName": "FN-89xwf0",
84. "fullName": "LN-8wr6uiig3FN-89xwf0",
85. "id": 23009,
86. "idCardNo": "CARD-7t09x2dw3i3y78z24e",
87. "lastName": "LN-8wr6uiig3",
88. "nationality": "NAT-9uu7xo",
89. "telNo":: "TEL-p8ym9rtwy"
90. },
91. {
92. "address": "ADDR-gupoe8jwcqwcjs2u01oa8",
93. "email": "[email protected]",
94. "firstName": "FN-0amkpy2",
95. "fullName": "LN-i73kpz5ncFN-0amkpy2",
96. "id": 23008,
97. "idCardNo": "CARD-itgmrwwichkzan5220",
98. "lastName": "LN-i73kpz5nc",
99. "nationality": "NAT-k2aq2t",
100. "telNo":: "TEL-2wdhbs"
101. },
102. {
103. "address": "ADDR-gp9q73fzs68agav6",
104. "email": "[email protected]",
105. "firstName": "FN-w42bd8y",
106. "fullName": "LN-utrnn25cFN-w42bd8y",
107. "id": 23007,
108. "idCardNo": "CARD-rrznb3ihqf94k2wjkv",
109. "lastName": "LN-utrnn25c",
110. "nationality": "NAT-gs3e9rk",
111. "telNo":: "TEL-g8j19nqz9"
112. },
113. {
114. "address": "ADDR-ja8w4gq485m3dn2gr66",
115. "email": "[email protected]",
116. "firstName": "FN-dxfyd5m5m",
117. "fullName": "LN-li98bkFN-dxfyd5m5m",
118. "id": 23006,
119. "idCardNo": "CARD-indqfrmi13zfazly67",
120. "lastName": "LN-li98bk",
121. "nationality": "NAT-qglj9sx2",
122. "telNo":: "TEL-mzlpe3m"
123. },
124. {
125. "address": "ADDR-rm3r94qanvt1q4drp",
126. "email": "[email protected]",
127. "firstName": "FN-qkq3w1m",
128. "fullName": "LN-0j90saFN-qkq3w1m",
129. "id": 23005,
130. "idCardNo": "CARD-8vc92wevyunbpl29c0",
131. "lastName": "LN-0j90sa",
132. "nationality": "NAT-mv2wzlt",
133. "telNo":: "TEL-ntkah0"
134. },
135. {
136. "address": "ADDR-u3gsxpq61e2",
137. "email": "[email protected]",
138. "firstName": "FN-evno7jy",
139. "fullName": "LN-0fuix09FN-evno7jy",
140. "id": 23004,
141. "idCardNo": "CARD-jgyf09by0rxboex8ut",
142. "lastName": "LN-0fuix09",
143. "nationality": "NAT-cw8cctzy",
144. "telNo":: "TEL-artsappc2"
145. },
146. {
147. "address": "ADDR-04kfdpp7",
148. "email": "[email protected]",
149. "firstName": "FN-zz0e74gvh",
150. "fullName": "LN-26u851FN-zz0e74gvh",
151. "id": 23003,
152. "idCardNo": "CARD-wminx9rykz1sn7xsxz",
153. "lastName": "LN-26u851",
154. "nationality": "NAT-05uk2c93",
155. "telNo":: "TEL-9de2jt4oh",
156. },
157. {
158. "address": "ADDR-i18dy2cew6eizvmvgi0w",
159. "email": "[email protected]",
160. "firstName": "FN-gt4aice1",
161. "fullName": "LN-db6vre9FN-gt4aice1",
162. "id": 23002,
163. "idCardNo": "CARD-spwifyvehzkcfj5g7f",
164. "lastName": "LN-db6vre9",
165. "nationality": "NAT-osiionb",
166. "telNo":: "TEL-1vigb907",
167. }
168. ],
169. "page": 1,
170. "record": 23013,
171. "rows": 15,
172. "total": 1535
173. }
jqGrid根據jsonReader中的設置，解析json數據。根據jsonReader中的root（我設置的是“gridModel”），得到數據記錄數組；根據rows得到每頁顯示的行數；根據page設置當前頁數；根據records（我設置的是“record”）得到所有記錄數量；根據total得到所有頁數。
由此，jqGrid完成一個request，並將得到的response，解析爲所需的數據，顯示到Grid表格中。
如何操作Grid表格及其數據。
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的選項名，例如：
1. var id = $("#gridTable").jqGrid("getGridParam", "selrow");
即可獲得當前選中的行的ID。
注：selrow是jqGrid選項之一，默認值是null。這是一個只讀選項，代表最後選中行的ID。如果執行翻頁或者排序後，此選項將被設爲null。關於其他選項，後續會有介紹。
如果不傳入name參數，則會返回jqGrid整個選項options。
2. getRowData
這個方法用來獲得某行的數據。它具有一個rowid參數，jqGrid會根據這個rowid返回對應行的數據，返回的是name:value類型的數組。例如：
1. var getContact= function() {
2. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
3.
4. var rowData =$("#gridTable").jqGrid("getRowData", selectedId);
5.
6. alert("First Name: " +rowData.firstName);
7. };
如果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指定行的前面或後面。
例如：
1. var addContact= function() {
2. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
3.
4. var dataRow ={
5. id : 99,
6. lastName : "Zhang",
7. firstName : "San",
8. email : "[email protected]",
9. telNo : "0086-12345678"
10. };
11.
12. if (selectedId){
13. $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
14.
15. } else {
16. $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
17.
18. }
19. };
這個方法可以一次性插入多行，data參數必須是[{name1:value1,name2: value2…}, {name1:value1,name2:
value2…}]這樣的數組形式，而且rowid參數也應該設爲data參數對象中代表id的field名稱。不過，此時的rowid不用必須是colModel中的一部分。
例如：
1. var addContact= function() {
2. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
3.
4. var dataRow = [{
5. id : 99,
6. lastName : "Zhang",
7. firstName : "San",
8. email : "[email protected]",
9. telNo : "0086-12345678"
10. },
11. {
12. id : 100,
13. lastName : "Li",
14. firstName : "Si",
15. email : "[email protected]",
16. telNo : "0086-12345678"
17. },
18. {
19. id : 101,
20. lastName : "Wang",
21. firstName : "Wu",
22. email : "[email protected]",
23. telNo : "0086-12345678"
24. }];
25.
26. if (selectedId){
27. $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId);
28.
29. } else {
30. $("#gridTable").jqGrid("addRowData", "id", dataRow, "first");
31.
32. }
33. };
注：我測試了一下，一次插入多行的情況下，用於設置插入位置的後兩個參數，似乎沒有起作用。插入的幾行數據都被置於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。
例如：
1. var updateContact= function() {
2. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
3.
4. var dataRow ={
5. lastName : "Li",
6. firstName : "Si",
7. email : "[email protected]"
8. };
9.
10. var cssprop ={
11. color : "#FF0000"
12. };
13.
14. $("#gridTable").jqGrid('setRowData', selectedId, dataRow,cssprop);
15. };
5. delRowData
這個方法用於刪除某行數據。執行成功返回true，否則返回false。具有一個參數rowid，代表要刪除的行id。例如：
1. var deleteContact= function() {
2. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
3.
4. $("#gridTable").jqGrid('delRowData', selectedId);
5. };
6. setGridParam
這個方法與getGridParam對應，用於設置jqGrid的options選項。返回jqGrid對象。參數爲{name1:value1,name2:
value2…}形式的對象（name來自jqGrid的options選項名）。某些選項在設置之後需要trigger("reloadGrid")，才能顯示出效果。
例如：
1. var changeGridOptions= function() {
2. $("#gridTable").jqGrid("setGridParam", {
3. rowNum: 50,
4. page: 16
5. }).trigger('reloadGrid');
6. };
注：我測試了一下，這個方法對於設置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部分：
1. $(function(){
2. // 配置jqGrid組件
3. $("#gridTable").jqGrid({
4. url: "jqGrid01.action",
5. datatype: "json",
6. mtype: "GET",
7. height: 350,
8. width: 600,
9. colModel: [
10. {name:"id",index:"id",label:"編碼",width:40},
11. {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false},
12. {name:"firstName",index:"firstName",label:"名",width:80,sortable:false},
13. {name:"email",index:"email",label:"電子郵箱",width:160,sortable:false},
14. {name:"telNo",index:"telNo",label:"電話",width:120,sortable:false}
15. ],
16. viewrecords: true,
17. rowNum: 15,
18. rowList: [15,50,100],
19. prmNames: {search: "search"},
20. jsonReader: {
21. root:"gridModel",
22. records: "record",
23. repeatitems : false
24. },
25. pager: "#gridPager",
26. caption: "聯繫人列表",
27. hidegrid: false,
28. shrikToFit: true
29. });
30. });
31. var echoSelRow= function() {
32. var id = $("#gridTable").jqGrid("getGridParam", "selrow");
33.
34. alert("當前選中行ID：" +id);
35. };
36. var getContact= function() {
37. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
38.
39. var rowData =$("#gridTable").jqGrid("getRowData", selectedId);
40.
41. alert("First Name: " +rowData.firstName);
42. };
43. var addContact= function() {
44. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
45.
46. var dataRow ={
47. id : 99,
48. lastName : "Zhang",
49. firstName : "San",
50. email : "[email protected]",
51. telNo : "0086-12345678"
52. };
53.
54. if (selectedId){
55. $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);
56.
57. } else {
58. $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");
59.
60. }
61. };
62. var updateContact= function() {
63. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
64.
65. var dataRow ={
66. lastName : "Li",
67. firstName : "Si",
68. email : "[email protected]"
69. };
70.
71. var cssprop ={
72. color : "#FF0000"
73. };
74.
75. $("#gridTable").jqGrid('setRowData', selectedId, dataRow,cssprop);
76. };
77. var deleteContact= function() {
78. var selectedId= $("#gridTable").jqGrid("getGridParam", "selrow");
79.
80. $("#gridTable").jqGrid('delRowData', selectedId);
81. };
82. var changeGridOptions= function() {
83. $("#gridTable").jqGrid("setGridParam", {
84. rowNum: 50,
85. page: 16
86. }).trigger('reloadGrid');
87.
88. $("#gridTable").jqGrid("setCaption", "ContactList").trigger('reloadGrid');
89.
90. alert($("#gridTable").jqGrid("getGridParam", "caption"));
91. alert($("#gridTable").jqGrid("getGridParam", "rowNum"));
92. };
93. var resetWidth= function() {
94. $("#gridTable").jqGrid("setGridWidth", 300, false);
95. };
html部分：
1. <!DOCTYPE html
2. PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN"
3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
5. <head>
6. <title>jqGrid02</title>
7. <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" />
8. <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" />
9.
10. <mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js"mce_src="js/jquery-1.4.2.min.js"></mce:script>
11. <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>
12. <mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script>
13. <mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js"type="text/javascript"></mce:script>
14.
15. <mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script>
16. </head>
17. <body>
18. <h3>
19. jqGrid測試 02
20. </h3>
21. <div>
22. <table id="gridTable"></table>
23. <div id="gridPager"></div>
24. </div>
25.
26. <br />
27.
28. <div>
29. <button onclick="echoSelRow()">當前行ID</button>
30. <button onclick="getContact()">當前聯繫人</button>
31. <button onclick="addContact()">添加行</button>
32. <button onclick="updateContact()">修改行</button>
33. <button onclick="deleteContact()">刪除行</button>
34. <button onclick="changeGridOptions()">改變Grid選項</button>
35. <button onclick="resetWidth()">改變Grid寬度</button>
36. </div>
37. </body>
38. </html>
轉載自：http://blog.csdn.net/paul342/article/details/19548487