jqgrid嵌套子表格

时间：2023-03-09 05:08:43
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. });

相关文章