所谓subgrid就是在我们每一条所选中记录下面在出现一个数据表格(如图),里面的内容都是这条父记录的子记录。jqGrid提供了两种处理子记录的方法:subGrid方法和将一个grid作为subGrid
subgrid安装:确保你下载的jqGrid的js包中含有grid.subgrid.js组件
属性 :下列的属性请在grid的options(选项)中使用(注:详见jqGrid中文文档(2)–选项)
属性 | 类型 | 描述 | 默认值 | |
subGrid | boolean | 若使用subgrid功能将此属性设置为true,此时在基本的Grid左侧会出现额外的显示加号图标的一列,表明用户可以点击加号展开该行显示subgrid数据,默认所有行是收缩的。 | false | |
subGridOptions | object | 一组对subgrid设置的属性,默认所有属性使用下列的默认值{ plusicon : “ui-icon-plus”, minusicon : “ui-icon-minus”, openicon: “ui-icon-carat-1-sw”, expandOnLoad: false, selectOnExpand : false, reloadOnExpand : true } plusicon and minusicon定义收缩和展开时的图标样式,名称必须符合Theme Roller的规范openicon当subgrid展开时minusicon下面的图标样式expandOnload为真时当数据装载时所有行自动展开selectOnLoad为真时当鼠标点击加号图标该行处于选中状态reloadOnExpand 为假时subgrid中的数据只装载一次,随后的点击仅仅显示隐藏数据并不会有ajax交互。 | ||
subGridModel | array | 这是一组描述subgrid列属性和subgrid数据的数组,只有当subGrid为真才生效,语法如: subGridModel : [ { name : ['name_1','name_2',…,'name_n'], width : [width_1,width_2,…,width_n] , align : ['left','center',…,'right'] , params : [param_1,…,param_n], mapping:['name_1_map','name_2_map',…,'name_n_map']} ] name: 包含列去标签索引(labels)的数组 width: 包含列宽度的数组,个数要与name中的一致 align: 包含列中文字对齐状态的数组,值可为left、center、right,默认left params: 类型数组,默认只将行id传给服务端,可以添加一个额外的参数传给服务端,名称可以是colModel中的name属性值 mapping:当repeateditems为false才可用,我们用name映射subgrid中的name, | ||
subgridtype | mixed | 装入subgrid的数据类型。默认按父grid中的数据类型 | null | |
subGridWidth | integer | 设置subgrid列的宽度 | true | |
subGridUrl | string | 当subGrid属性为真才有效,获取subgrid数据的路径,jqGrid将行的ID增加此url中,若要添加其他参数,使用subGridModel | ||
ajaxSubgridOptions |
| 设置ajax的全局属性作用于当subgrid获得数据时,会覆盖当前ajax的所有设置,包括完成事件 | 0 |
在配置subgrid前你需要先在xmlReader或jsonReader中配置subgrid项,默认的设置是
xmlReader : {
…
subgrid: {
root: “rows”,
row: “row”,
repeatitems: true,
cell: “cell”
}
}
jsonReader : {
…
subgrid: {
root: “rows”,
repeatitems: true,
cell: “cell”
}
}
映射规则与基本grid中的相同,了解更多jqGrid中文文档(3)–数据操作
下面是一个subGridType从服务端获取的例子
jQuery("#grid_id").jqGrid({ ... subgridtype: function(rowidprm) { jQuery.ajax({ url:'url_to_the_service', data:rowidprm, dataType:"json", complete: function(jsondata,stat){ if(stat=="success") { var thegrid = jQuery("#grid_id")[0]; thegrid.subGridJson(eval("("+jsondata.responseText+")"),rowidprm.id); } } }); },subgrid
rowidprms是一个包含行id和其他参数的数组,作为需要来设置subGridModel的参数和subGridJson方法
事件:
pID:点击行时会创建子表格subGrid,是个div元素,它的id就是pID
id:要展开行显示子表格的行id
sPostData:当subgrid响应时发布的数据
事件 | 参数 | 描述 |
subGridBeforeExpand | pID,id | 展开grid前触发,事件应返回false或true,当返回false,subgrid中的行不会被展开也不会打开。 |
subGridRowExpanded | pID,id | subgrid生效并且点击展开加号图标钮时触发,可以在subgrid中设置自定义数据 |
subGridRowColapsed | pID,id | 当点击收缩图标时触发,事件应返回false或true;当为false行不会收缩。 |
serializeSubGridData | pID,id | 此事件被用作经过ajax响应后初始化数据,需返回初始化的数据(XML、JSON等格式) |
方法:
事件 | 参数 | 描述 |
subGridBeforeExpand | pID,id | 展开grid前触发,事件应返回false或true,当返回false,subgrid中的行不会被展开也不会打开。 |
subGridRowExpanded | pID,id | subgrid生效并且点击展开加号图标钮时触发,可以在subgrid中设置自定义数据 |
subGridRowColapsed | pID,id | 当点击收缩图标时触发,事件应返回false或true;当为false行不会收缩。 |
serializeSubGridData | pID,id | 此事件被用作经过ajax响应后初始化数据,需返回初始化的数据(XML、JSON等格式) |
禁用/启用 subgrid: