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