jqGrid Subgrid

转：http://www.coding123.net/article/20130707/jqGrid-subGrid-config.aspx

有些时候需要显示（或者编辑）父表格中选中行的子元素，jqGrid两种操作方法操作子记录。

• 子表格（subGrid）
• 一个grid对象作为子表格（subGrid）

安装

要使用这个方法，需要在下载页面勾选Subgrid后再下载jqGrid，下载地址：http://www.trirand.com/blog/?page_id=6。源文件grid.subgrid.js在src目录中。

属性

SubGrids使用父表格中如下属性，事件和方法，即这些属性可以用在父表格中配置。

属性	类型	描述	默认值
subGrid	boolean	设置为true启用子表格。如果启用子表格，在父表格的左边会添加附加的列。此列包含一个“加”图片表示用户可以点击它展开行，默认所有行的子表格是收缩的。	false
subGridOptions	object	子表格的配置，下面为配置的默认值 －收缩 JavaScript代码 { plusicon :  "ui-icon-plus", minusicon :  "ui-icon-minus", openicon:  "ui-icon-carat-1-sw", expandOnLoad:  false, selectOnExpand :  false, reloadOnExpand :  true } plusicon 和 minusicon ：定义展开/收缩子表格的图标。名字需要从设置的主题中选出 openicon ：行展开时，显示在 minusicon 下的图标 expandOnLoad ：设置为true，当子表格数据加载完毕后自动展开（when set to true make it so that all rows will be expanded automatically when a new set of data is loaded. ） selectOnLoad ：设置为true，点击展开图标（plusicon）将会选择父表格中的此行数据 reloadOnExpand ：设置为false，展开时仅加载一次数据，随后的点击图标点击操作只是显示或者隐藏子表格，而不会再发送ajax重新获取数据
subGridModel	array	仅当subGrid设置为grud有效，描述子表格数据的列模型（column model），语法 －收缩 JavaScript代码 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：子表格列表头显示的标签内容 width：列宽数组，需要和name数组长度一致 align： 列对其方式，可以为left，center，right。不设置默认为left params：给subGridUrl配置增加的附加参数（an array in which we can add a name from main grid's colModel to pass as additional parameter to the subGridUrl.） mapping：子表格中的repeatitems设置为false时使用。用于定义子表格数据列名称的映射。不设置此参数，则使用name配置作为映射。
subgridtype	mixed	设置子表格可以作为服务加载（This option allow loading subgrid as a service.）。没有设置此项，将使用父表格的datatype配置，参考下面的示例	null
subGridWidth	integer	设置子表格宽度	20
subGridUrl	string	配置子表格数据源url地址。jqGrid添加父行id作为参数添加传递到这个url地址。 如果不需要传递附加参数，要传递附加参数，可以配置subGridModel中的params。	empty string
ajaxSubgridOptions	object	设置子表格ajax请求数据时的全局配置。会重写子表格中当前的所有ajax请求配置，包括complete事件。	empty object

　　要配置子表格，需要同时配置xmlReader或者jsonReader中的subGrid配置项，xmlReader默认配置如下

－收缩 JavaScript代码

xmlReader : {
...
   subgrid: {
      root:  "rows", 
      row:  "row", 
      repeatitems:  true, 
      cell:  "cell"
   }
}

 jsonReader

－收缩 JavaScript代码

jsonReader : {
...
   subgrid: {
      root:  "rows", 
      repeatitems:  true, 
      cell:  "cell"
   }
}

　　映射规则和父表格一样，更多信息参考：
jqGrid XML数据源读取器选项配置
jqGrid JSON数据源读取器选项配置
jqGrid datatype配置为function
jqGrid自定义数据

　　为了将子表格作为服务器，subGridType需要设置正确（In order to use correct subGridType as service ），下面示例展示实现

－收缩 JavaScript代码

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
...
});

　　参数 rowidprm 为键值对对象包含被展开行的id，设置subGridModel配置的其他的参数，subGridJson方法将在下面介绍。

事件

事件参数说明

• pID：放置子表格内容的div元素的唯一id
• id： 数据行id
• sPostData：子表格发送请求时提交的数据

Event	Parameters	Description
subGridBeforeExpand	pID, id	展开子表格前触发。需要返回true/false，返回false阻止展开子表格
subGridRowExpanded	pID, id	展开子表格后触发，用于想子表格添加自定义的数据
subGridRowColapsed	pID, id	收缩子表格后触发，需要返回true/false，返回false不收缩子表格
serializeSubGridData	sPostData	序列化传递给ajax请求的数据，需要返回序列化后的数据。当需要向服务器传递自定义数据时使用，如json/xml格式的字符串等。

Methods

方法	参数	返回值	描述
expandSubGridRow	rowid	jqGrid object	动态展开指定rowid的行的子表格
collapseSubGridRow	rowid	jqGrid object	动态收缩指定rowid的行的子表格
toggleSubGridRow	rowid	jqGrid object	动态切换指定rowid的行的子表格的展开/收缩状态
subGridJson	json, rowid	false	向子表格添加数据，json对对象，rowid为需要添加的数据行id
subGridXml	xml, rowid	false	向子表格添加数据，xml为xml dom节点，rowid为需要添加的数据行id

示例

显示每行数据中的详细数据

－收缩 JavaScript代码

jQuery(document).ready( function(){ 
  jQuery( "#list").jqGrid({
    url: 'example.php',
    datatype:  'xml',
    mtype:  'GET',
    colNames:[ 'Inv No', 'Date',  'Amount', 'Tax', 'Total', 'Notes'],
    colModel :[ 
      {name: 'invid', index: 'invid', width:55}, 
      {name: 'invdate', index: 'invdate', width:90}, 
      {name: 'amount', index: 'amount', width:80, align: 'right'}, 
      {name: 'tax', index: 'tax', width:80, align: 'right'}, 
      {name: 'total', index: 'total', width:80, align: 'right'}, 
      {name: 'note', index: 'note', width:150, sortable: false} 
    ],
    pager:  '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname:  'invid',
    sortorder:  'desc',
    viewrecords:  true,
    caption:  'My first grid',
    subGrid:  true,
    subGridUrl :  "subgrid.php",
    subGridModel : [ 
      {
      name  : [ 'No',  'Item',  'Qty',  'Unit',  'Line Total'],
      width : [55, 200, 80, 80, 80],
      align : [ 'left', 'left', 'right', 'right', 'right'],
      params: [ 'invdate'] 
      }
    ]
  }); 
});