jQuery學習筆記--JqGrid相關操作 方法列表 備忘 重點講解(超重要)

JqGrid相關操作備忘 方法列表

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 rowwith id = rowid; if onselectrow is true (the default) then theevent onSelectRow 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();   //Clearsthe currently loaded data from grid. If the clearfooter parameter is set totrue, the method clears the data placed on the footer row.

7. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);

//This method can change the contentof 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 setto true 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傳遞的參數名稱。其默認值爲:

viewplain

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數據。其默認值爲:

viewplain

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數據,不太符合默認設置(比如內部的結構名不太一樣),那麼就有必要修改這一設置。比如:

viewplain

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時:

viewplain

1.  jQuery("#gridid").jqGrid({ 

2.      ... 

3.      jsonReader : { 

4.          root:"invdata", 

5.          page: "currpage", 

6.          total: "totalpages", 

7.          records: "totalrecords" 

8.      }, 

9.      ... 

10. }); 

json結構爲:

viewplain

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時:

viewplain

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結構爲:

viewplain

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. } 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章