jqGrid與Struts2的結合應用(二) —— 操作Grid數據

 

上一篇中,jqGrid已經可以從Server端獲得數據,並顯示在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的選項名,例如:

即可獲得當前選中的行的ID。

 

注:selrow是jqGrid選項之一,默認值是null。這是一個只讀選項,代表最後選中行的ID。如果執行翻頁或者排序後,此選項將被設爲null。關於其他選項,後續會有介紹。

 

如果不傳入name參數,則會返回jqGrid整個選項options。

 

 

 

2. getRowData

 

這個方法用來獲得某行的數據。它具有一個rowid參數,jqGrid會根據這個rowid返回對應行的數據,返回的是name:value類型的數組。例如:

 

如果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指定行的前面或後面。

例如:

 

這個方法可以一次性插入多行,data參數必須是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]這樣的數組形式,而且rowid參數也應該設爲data參數對象中代表id的field名稱。不過,此時的rowid不用必須是colModel中的一部分。
例如:

 

注:我測試了一下,一次插入多行的情況下,用於設置插入位置的後兩個參數,似乎沒有起作用。插入的幾行數據都被置於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。

例如:

 

 

 

5. delRowData

 

這個方法用於刪除某行數據。執行成功返回true,否則返回false。具有一個參數rowid,代表要刪除的行id。例如:

 

 

 

 

6. setGridParam

 

這個方法與getGridParam對應,用於設置jqGrid的options選項。返回jqGrid對象。參數爲{name1:value1,name2: value2…}形式的對象(name來自jqGrid的options選項名)。某些選項在設置之後需要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部分:

 

 

html部分:

 

 

 

 

 

 

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