jqgrid嵌套子表格

jqgrid的subGrid子表格

 

jqGrid的一项高级功能就是嵌套子表格，使用起来也非常简单。使用的方式有两种：

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

1.选项含义

使用子表格，涉及到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，做些自定义的操作。

 

2.js代码使用示例：

 

 

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.                 
14. {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false},  
15.               {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false}  
16.         ],  
17.         viewrecords: true,  
18.         rowNum: 15,  
19.         rowList: [15,50,100],  
20.         prmNames: {search: "search"},  
21.         jsonReader: {  
22.             root:"gridModel",  
23.             records: "record",  
24.             repeatitems : false,  
25.         },  
26.         pager: "#gridPager",  
27.         caption: "联系人列表",  
28.         hidegrid: false,  
29.         shrikToFit: true,  
30.         subGrid: true,  // (1)开启子表格支持  
31.         subGridRowExpanded: function(subgrid_id, row_id) {  //   
32. (2)子表格容器的id和需要展开子表格的行id，将传入此事件函数  
33.             var subgrid_table_id;  
34.             subgrid_table_id = subgrid_id + "_t";   //   
35. (3)根据subgrid_id定义对应的子表格的table的id  
36.               
37.             var subgrid_pager_id;  
38.             subgrid_pager_id = subgrid_id + "_pgr"  //   
39. (4)根据subgrid_id定义对应的子表格的pager的id  
40.               
41.             // (5)动态添加子报表的table和pager  
42.             $("#" + subgrid_id).html("<table id='"+subgrid_table_id+"'   
43. class='scroll'></table><div id='"+subgrid_pager_id+"'   
44. class='scroll'></div>");  
45.               
46.             // (6)创建jqGrid对象  
47.             $("#" + subgrid_table_id).jqGrid({  
48.                 url: "fetchPatentCases.action?contact.id="+row_id,  //   
49. (7)子表格数据对应的url，注意传入的contact.id参数  
50.                 datatype: "json",  
51.                 colNames: ['编号','内部编码','名称','申请号'],  
52.                 colModel: [  
53.                     {name:"id",index:"id",width:80,key:true},  
54.                     {name:"internalNo",index:"internalNo",width:130},  
55.                     {name:"name",index:"name",width:80,align:"right"},  
56.                       
57. {name:"applicationNo",index:"applicationNo",width:80,align:"right"}  
58.                 ],  
59.                 jsonReader: {   // (8)针对子表格的jsonReader设置  
60.                     root:"gridModel",  
61.                     records: "record",  
62.                     repeatitems : false  
63.                 },  
64.                 prmNames: {search: "search"},  
65.                 pager: subgrid_pager_id,  
66.                 viewrecords: true,  
67.                 height: "100%",  
68.                 rowNum: 5  
69.            });  
70.        }  
71.     });  
72. });