jqgrid subgrid 可以显示多个子表格吗 如何打开
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jqgrid subgrid 可以显示多个子表格吗 如何打开相关的知识,希望对你有一定的参考价值。
参考技术A 这个需要你们技术进行更改,可以增加jqGrid的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)。
现在来看看代码中到底多了哪些内容。
$(function(){ // 配置jqGrid组件 $("#gridTable").jqGrid({ url: "jqGrid05.action", datatype: "json", mtype: "GET", height: 350, width: 600, colModel: [ {name:"id",index:"id",label:"编码",width:40}, {name:"lastName",index:"lastName",label:"姓",width:80}, {name:"firstName",index:"firstName",label:"名",width:80}, {name:"email",index:"email",label:"电子邮箱",width:160,sortable:false}, {name:"telNo",index:"telNo",label:"电话",width:120,sortable:false} ], viewrecords: true, rowNum: 15, rowList: [15,50,100], prmNames: {search: "search"}, jsonReader: { root:"gridModel", records: "record", repeatitems : false, }, pager: "#gridPager", caption: "联系人列表", hidegrid: false, shrikToFit: true, subGrid: true, // (1)开启子表格支持 subGridRowExpanded: function(subgrid_id, row_id) { // (2)子表格容器的id和需要展开子表格的行id,将传入此事件函数 var subgrid_table_id; subgrid_table_id = subgrid_id + "_t"; // (3)根据subgrid_id定义对应的子表格的table的id var subgrid_pager_id; subgrid_pager_id = subgrid_id + "_pgr" // (4)根据subgrid_id定义对应的子表格的pager的id // (5)动态添加子报表的table和pager $("#" + subgrid_id).html("<table id=\'"+subgrid_table_id+"\' class=\'scroll\'></table><div id=\'"+subgrid_pager_id+"\' class=\'scroll\'></div>"); // (6)创建jqGrid对象 $("#" + subgrid_table_id).jqGrid({ url: "fetchPatentCases.action?contact.id="+row_id, // (7)子表格数据对应的url,注意传入的contact.id参数 datatype: "json", colNames: [\'编号\',\'内部编码\',\'名称\',\'申请号\'], colModel: [ {name:"id",index:"id",width:80,key:true}, {name:"internalNo",index:"internalNo",width:130}, {name:"name",index:"name",width:80,align:"right"}, {name:"applicationNo",index:"applicationNo",width:80,align:"right"} ], jsonReader: { // (8)针对子表格的jsonReader设置 root:"gridModel", records: "record", repeatitems : false }, prmNames: {search: "search"}, pager: subgrid_pager_id, viewrecords: true, height: "100%", rowNum: 5 }); } }); });
以上是关于jqgrid subgrid 可以显示多个子表格吗 如何打开的主要内容,如果未能解决你的问题,请参考以下文章
jqgrid subGridRowExpanded出来的子表格如何获取选中的行?
jqgrid更改子网格的位置或将子网格图标添加到自定义列而不是其他任何地方?
为啥这个 jqgrid Subgrid navButtonAdd Custom Button bug for FireFox 和 IE 会发生?