jqGrid與Struts2的結合應用（八） —— 奇妙的subGrid子表格

jqGrid的一項進階功能就是嵌套子表格，使用起來也非常簡單。使用的方式有兩種：

• 使用普通的subGrid子表格；
• 使用一個完整jqGrid作為子表格；

顯然第二種方式更加通用，功能更加強大，因此我主要使用第二種方式。至於第一種方式，可以具體參考官方文檔（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
）。

使用完整jqGrid作為子表格

使用子表格，涉及到jqGrid的三個選項：

• subGrid
  
  ：首先必須將jqGrid的subGrid選項設定為true，預設為false；當此項設為true的時候，Grid表格的最左邊將會添加一列，裡面有一個“+”表徵圖，用於展開子格；
• subGridRowExpanded
  
  ：當點擊“+”展開子表格時，將觸發此選項定義的事件方法；
• subGridRowColapsed
  
  ：當點擊“-”收合子表格時，將觸發此選項定義的事件方法；

注1

：subGridRowExpanded定義的事件方法函數將會得到兩個參數：

• subgrid_id
  
  ：子表格的id；當子表格展開的時候，在主表格中會建立一個div元素用來容納子表格，subgrid_id就是這個div的id。
• row_id
  
  ：主表格中所要展開子表格的行的id。

注2

：在subGridRowExpanded定義的事件方法函數中，即可根據以上兩個參數，建立新的jqGrid對象，其中的options選項可參考主表格的jqGrid選項來運用。可以理解為在主表格中在嵌套一個新的jqGrid對象。當然，在subGridRowExpanded定義的事件函數中，也不一定非得嵌套一個新的jqGrid到主表格，可以將其放置於任何自己希望的位置，甚至做些別的操作，根本不去裡理會子表格，比如使用$.ajax()向Server發送ajax請求，並根據返回的json，做些自訂的操作。

注3

：應當注意subGridRowColapsed的拼字並太符合規範，但卻不得不遵循這個拼字。哈哈~

注4

：相對於subGridRowExpanded必須定義事件函數來完成操作，subGridRowColapsed不用刻意定義對應的事件函數；因為當行收合的時候，上面提到的那個動態建立用來容納子表格的div，其裡面的內容將會被自動移除(removed)。

現在來看看代碼中到底多了哪些內容。

 

FetchPatentCasesAction代碼：

package cn.gengv.struts2ex.jqGrid;<br />import java.util.List;<br />import com.byzl.hare.dao.impl.Criterion;<br />import com.byzl.hare.model.Contact;<br />import com.byzl.hare.model.PatentCase;<br />import com.byzl.hare.service.ContactService;<br />@SuppressWarnings("serial")<br />public class FetchPatentCasesAction extends JqGridBaseAction<PatentCase> {</p><p>private ContactService contactService;</p><p>private Contact contact;</p><p>@Override<br />public String execute() {<br />return this.refreshGridModel();<br />}</p><p>@Override<br />public int getResultSize() {<br />return this.contactService.queryPatentCasesCount(contact);<br />}<br />@Override<br />public int getResultSize(List<Criterion> criteria) {<br />return this.contactService.queryPatentCasesCount(contact);<br />}<br />@Override<br />public List<PatentCase> listResults(int from, int length) {<br />return this.contactService.queryPatentCases(contact, from, length);</p><p>}<br />@Override<br />public List<PatentCase> listResults(List<Criterion> criteria, int from,<br />int length) {<br />return this.contactService.queryPatentCases(contact, from, length);<br />}<br />@Override<br />public void sortResults(List<PatentCase> results, String field, String order) {<br />// TODO Auto-generated method stub</p><p>}<br />public void setContactService(ContactService contactService) {<br />this.contactService = contactService;<br />}<br />public Contact getContact() {<br />return contact;<br />}<br />public void setContact(Contact contact) {<br />this.contact = contact;<br />}<br />}

Action設定：

<action name="fetchPatentCases" class="cn.gengv.struts2ex.jqGrid.FetchPatentCasesAction"><br /><result name="success" type="json"><br /><param name="includeProperties"><br />gridModel/[/d+/]/./w+,<br />rows,page,total,record<br /></param><br /><param name="noCache">true</param><br /><param name="ignoreHierarchy">false</param><br /></result><br /></action>

 

javascript代碼：

$(function(){<br />// 配置jqGrid組件<br />$("#gridTable").jqGrid({<br />url: "jqGrid05.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},<br /> {name:"firstName",index:"firstName",label:"名",width:80},<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 />subGrid: true,// (1)開啟子表格支援<br />subGridRowExpanded: function(subgrid_id, row_id) {// (2)子表格容器的id和需要展開子表格的行id，將傳入此事件函數<br /> var subgrid_table_id;<br /> subgrid_table_id = subgrid_id + "_t";// (3)根據subgrid_id定義對應的子表格的table的id</p><p> var subgrid_pager_id;<br /> subgrid_pager_id = subgrid_id + "_pgr"// (4)根據subgrid_id定義對應的子表格的pager的id</p><p> // (5)動態添加子報表的table和pager<br /> $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");</p><p> // (6)建立jqGrid對象<br /> $("#" + subgrid_table_id).jqGrid({<br /> url: "fetchPatentCases.action?contact.id="+row_id,// (7)子表格式資料對應的url，注意傳入的contact.id參數<br /> datatype: "json",<br /> colNames: ['編號','內部編碼','名稱','申請號'],<br /> colModel: [<br /> {name:"id",index:"id",width:80,key:true},<br /> {name:"internalNo",index:"internalNo",width:130},<br /> {name:"name",index:"name",width:80,align:"right"},<br /> {name:"applicationNo",index:"applicationNo",width:80,align:"right"}<br /> ],<br /> jsonReader: {// (8)針對子表格的jsonReader設定<br />root:"gridModel",<br />records: "record",<br />repeatitems : false<br />},<br />prmNames: {search: "search"},<br />pager: subgrid_pager_id,<br />viewrecords: true,<br /> height: "100%",<br /> rowNum: 5<br /> });<br /> }<br />});</p><p>});

 

說明：

• 由於FetchPatentCasesAction繼承自JqGridBaseAction<PatentCase>，因此可以像之前的例子那樣，使用這個Action類來應對jqGrid子表格的請求。
• FetchPatentCasesAction的Action設定也可以仿照其他針對jqGrid的Action來設定。
• 對於子表格Grid來說，和主表格Grid並沒有什麼分別，主表格中可以用的選項，在子表格中也可以使用。因此需要設定jsonReader等選項來配合FetchPatentCasesAction中的成員變數。

OK，就這麼簡單，子表格功能完成了。