jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格

转至:http://blog.csdn.net/gengv/article/details/5733058

作者:gengv

 

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代码:

 

[java]  view plain copy
  1. package cn.gengv.struts2ex.jqGrid;  
  2. import java.util.List;  
  3. import com.byzl.hare.dao.impl.Criterion;  
  4. import com.byzl.hare.model.Contact;  
  5. import com.byzl.hare.model.PatentCase;  
  6. import com.byzl.hare.service.ContactService;  
  7. @SuppressWarnings("serial")  
  8. public class FetchPatentCasesAction extends JqGridBaseAction<PatentCase> {  
  9.       
  10.     private ContactService contactService;  
  11.       
  12.     private Contact contact;  
  13.       
  14.     @Override  
  15.     public String execute() {  
  16.         return this.refreshGridModel();  
  17.     }  
  18.       
  19.     @Override  
  20.     public int getResultSize() {  
  21.         return this.contactService.queryPatentCasesCount(contact);  
  22.     }  
  23.     @Override  
  24.     public int getResultSize(List<Criterion> criteria) {  
  25.         return this.contactService.queryPatentCasesCount(contact);  
  26.     }  
  27.     @Override  
  28.     public List<PatentCase> listResults(int from, int length) {  
  29.         return this.contactService.queryPatentCases(contact, from, length);  
  30.           
  31.     }  
  32.     @Override  
  33.     public List<PatentCase> listResults(List<Criterion> criteria, int from,  
  34.             int length) {  
  35.         return this.contactService.queryPatentCases(contact, from, length);  
  36.     }  
  37.     @Override  
  38.     public void sortResults(List<PatentCase> results, String field, String order) {  
  39.         // TODO Auto-generated method stub  
  40.           
  41.     }  
  42.     public void setContactService(ContactService contactService) {  
  43.         this.contactService = contactService;  
  44.     }  
  45.     public Contact getContact() {  
  46.         return contact;  
  47.     }  
  48.     public void setContact(Contact contact) {  
  49.         this.contact = contact;  
  50.     }  
  51. }  

 


Action设置:

 

[xhtml]  view plain copy
  1. <action name="fetchPatentCases" class="cn.gengv.struts2ex.jqGrid.FetchPatentCasesAction">  
  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>  

 

 


javascript代码:

 

[javascript]  view plain copy
  1. $(function(){  
  2.     // 配置jqGrid组件  
  3.     $("#gridTable").jqGrid({  
  4.         url: "jqGrid05.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},  
  12.               {name:"firstName",index:"firstName",label:"名",width:80},  
  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.         subGrid: true,  // (1)开启子表格支持  
  30.         subGridRowExpanded: function(subgrid_id, row_id) {  // (2)子表格容器的id和需要展开子表格的行id,将传入此事件函数  
  31.             var subgrid_table_id;  
  32.             subgrid_table_id = subgrid_id + "_t";   // (3)根据subgrid_id定义对应的子表格的table的id  
  33.               
  34.             var subgrid_pager_id;  
  35.             subgrid_pager_id = subgrid_id + "_pgr"  // (4)根据subgrid_id定义对应的子表格的pager的id  
  36.               
  37.             // (5)动态添加子报表的table和pager  
  38.             $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");  
  39.               
  40.             // (6)创建jqGrid对象  
  41.             $("#" + subgrid_table_id).jqGrid({  
  42.                 url: "fetchPatentCases.action?contact.id="+row_id,  // (7)子表格数据对应的url,注意传入的contact.id参数  
  43.                 datatype: "json",  
  44.                 colNames: ['编号','内部编码','名称','申请号'],  
  45.                 colModel: [  
  46.                     {name:"id",index:"id",width:80,key:true},  
  47.                     {name:"internalNo",index:"internalNo",width:130},  
  48.                     {name:"name",index:"name",width:80,align:"right"},  
  49.                     {name:"applicationNo",index:"applicationNo",width:80,align:"right"}  
  50.                 ],  
  51.                 jsonReader: {   // (8)针对子表格的jsonReader设置  
  52.                     root:"gridModel",  
  53.                     records: "record",  
  54.                     repeatitems : false  
  55.                 },  
  56.                 prmNames: {search: "search"},  
  57.                 pager: subgrid_pager_id,  
  58.                 viewrecords: true,  
  59.                 height: "100%",  
  60.                 rowNum: 5  
  61.            });  
  62.        }  
  63.     });  
  64.       
  65. });  

 

 


说明:

  • 由于FetchPatentCasesAction继承自JqGridBaseAction<PatentCase>,因此可以像之前的例子那样,使用这个Action类来应对jqGrid子表格的请求。
  • FetchPatentCasesAction的Action设置也可以仿照其他针对jqGrid的Action来设置。
  • 对于子表格Grid来说,和主表格Grid并没有什么分别,主表格中可以用的选项,在子表格中也可以使用。因此需要设置jsonReader等选项来配合FetchPatentCasesAction中的成员变量。


OK,就这么简单,子表格功能完成了。

 jqGrid与Struts2的结合应用(八) —— 奇妙的subGrid子表格

你可能感兴趣的:(struts2)