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的選項名，例如：
var id = $("#gridTable").jqGrid("getGridParam", "selrow");

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

 

註：selrow是jqGrid選項之一，預設值是null。這是一個唯讀選項，代表最後選中行的ID。如果執行翻頁或者排序後，此選項將被設為null。關於其他選項，後續會有介紹。

 

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

 

 

 

2. getRowData

 

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

var getContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var rowData = $("#gridTable").jqGrid("getRowData", selectedId);</p><p>alert("First Name: " + rowData.firstName);<br />};

 

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

例如：

var addContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var dataRow = {<br />id : 99,<br />lastName : "Zhang",<br />firstName : "San",<br />email : "zhang_san@126.com",<br />telNo : "0086-12345678"<br />};</p><p>if (selectedId) {<br />$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);</p><p>} else {<br />$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");</p><p>}<br />};

 

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

例如：

var addContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var dataRow = [{<br />id : 99,<br />lastName : "Zhang",<br />firstName : "San",<br />email : "zhang_san@126.com",<br />telNo : "0086-12345678"<br />},<br />{<br />id : 100,<br />lastName : "Li",<br />firstName : "Si",<br />email : "li_si@126.com",<br />telNo : "0086-12345678"<br />},<br />{<br />id : 101,<br />lastName : "Wang",<br />firstName : "Wu",<br />email : "wang_wu@126.com",<br />telNo : "0086-12345678"<br />}];</p><p>if (selectedId) {<br />$("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId);</p><p>} else {<br />$("#gridTable").jqGrid("addRowData", "id", dataRow, "first");</p><p>}<br />};

 

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

例如：

var updateContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var dataRow = {<br />lastName : "Li",<br />firstName : "Si",<br />email : "li_si@126.com"<br />};</p><p>var cssprop = {<br />color : "#FF0000"<br />};</p><p>$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);<br />};

 

 

 

5. delRowData

 

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

var deleteContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>$("#gridTable").jqGrid('delRowData', selectedId);<br />};

 

 

 

 

6. setGridParam

 

這個方法與getGridParam對應，用於設定jqGrid的options選項。返回jqGrid對象。參數為{name1:value1,name2: value2…}形式的對象（name來自jqGrid的options選項名）。某些選項在設定之後需要trigger("reloadGrid")，才能顯示出效果。

例如：

var changeGridOptions = function() {<br />$("#gridTable").jqGrid("setGridParam", {<br />rowNum: 50,<br />page: 16<br />}).trigger('reloadGrid');<br />};

 

註：我測試了一下，這個方法對於設定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部分：

$(function(){<br />// 配置jqGrid組件<br />$("#gridTable").jqGrid({<br />url: "jqGrid01.action",<br />datatype: "json",<br />mtype: "GET",<br />height: 350,<br />width: 600,<br />colModel: [<br /> {name:"id",index:"id",label:"編碼",width:40},<br /> {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false},<br /> {name:"firstName",index:"firstName",label:"名",width:80,sortable:false},<br /> {name:"email",index:"email",label:"電子郵箱",width:160,sortable:false},<br /> {name:"telNo",index:"telNo",label:"電話",width:120,sortable:false}<br />],<br />viewrecords: true,<br />rowNum: 15,<br />rowList: [15,50,100],<br />prmNames: {search: "search"},<br />jsonReader: {<br />root:"gridModel",<br />records: "record",<br />repeatitems : false<br />},<br />pager: "#gridPager",<br />caption: "連絡人清單",<br />hidegrid: false,<br />shrikToFit: true<br />});<br />});<br />var echoSelRow = function() {<br />var id = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>alert("當前選中行ID：" + id);<br />};<br />var getContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var rowData = $("#gridTable").jqGrid("getRowData", selectedId);</p><p>alert("First Name: " + rowData.firstName);<br />};<br />var addContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var dataRow = {<br />id : 99,<br />lastName : "Zhang",<br />firstName : "San",<br />email : "zhang_san@126.com",<br />telNo : "0086-12345678"<br />};</p><p>if (selectedId) {<br />$("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);</p><p>} else {<br />$("#gridTable").jqGrid("addRowData", 99, dataRow, "first");</p><p>}<br />};<br />var updateContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>var dataRow = {<br />lastName : "Li",<br />firstName : "Si",<br />email : "li_si@126.com"<br />};</p><p>var cssprop = {<br />color : "#FF0000"<br />};</p><p>$("#gridTable").jqGrid('setRowData', selectedId, dataRow, cssprop);<br />};<br />var deleteContact = function() {<br />var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");</p><p>$("#gridTable").jqGrid('delRowData', selectedId);<br />};<br />var changeGridOptions = function() {<br />$("#gridTable").jqGrid("setGridParam", {<br />rowNum: 50,<br />page: 16<br />}).trigger('reloadGrid');</p><p>$("#gridTable").jqGrid("setCaption", "Contact List").trigger('reloadGrid');</p><p>alert($("#gridTable").jqGrid("getGridParam", "caption"));<br />alert($("#gridTable").jqGrid("getGridParam", "rowNum"));<br />};<br />var resetWidth = function() {<br />$("#gridTable").jqGrid("setGridWidth", 300, false);<br />};

 

 

html部分：

<!DOCTYPE html<br />PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"><br /><head><br /><title>jqGrid02</title><br /><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" /><br /><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" /></p><p><mce:script type="text/javascript" src="../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script><br /><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><br /><mce:script src="../js/i18n/grid.locale-zh-CN.js" mce_src="js/i18n/grid.locale-zh-CN.js" type="text/javascript"></mce:script><br /><mce:script src="../js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script></p><p><mce:script src="js/jqGrid02.js" mce_src="js/jqGrid02.js" type="text/javascript"></mce:script><br /></head><br /><body><br /><h3><br />jqGrid測試 02<br /></h3><br /><div><br /><table id="gridTable"></table><br /><div id="gridPager"></div><br /></div></p><p><br /></p><p><div><br /><button onclick="echoSelRow()">當前行ID</button><br /><button onclick="getContact()">當前連絡人</button><br /><button onclick="addContact()">添加行</button><br /><button onclick="updateContact()">修改行</button><br /><button onclick="deleteContact()">刪除行</button><br /><button onclick="changeGridOptions()">改變Grid選項</button><br /><button onclick="resetWidth()">改變Grid寬度</button><br /></div><br /></body><br /></html>