jqGrid subGrid配置 如何首次加载动态展开所有的子表格

有时候需求需要默认加载表格的时候把子表格的数据也显示出来，经过研究相关SubGrids API配置如下：

　　    要配置子表格，需要同时配置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 ），下面示例展示实现：

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：子表格发送请求时提交的数据

Methods

显示每行数据中的详细数据，并把子table显示出来

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",

subGridOptions: {

plusicon: "ace-icon fa fa-plus center bigger-110 blue",
minusicon: "ace-icon fa fa-minus center bigger-110 blue",
openicon: "ace-icon fa fa-chevron-right center orange",
expandOnLoad: true,
selectOnExpand : false,
reloadOnExpand : false
},

onSelectRow: function (rowid, status, e) {
selectOptId = rowid;
console.log(‘selectOptId--:‘ + rowid);
//$("#grid-table").expandSubGridRow(rowid); 都可以
$("#grid-table").jqGrid (‘expandSubGridRow‘, rowid);
},

    subGridModel : [
      {
      name  : [‘No‘, ‘Item‘, ‘Qty‘, ‘Unit‘, ‘Line Total‘],
      width : [55, 200, 80, 80, 80],
      align : [‘left‘,‘left‘,‘right‘,‘right‘,‘right‘],
      params: [‘invdate‘]
      }
    ]
  });
}); 

<?php
// get the id passed automatically to the request
$id = $_GET[‘id‘];
// get the invoice date passed to this request via params array in
//subGridModel. We do not use it here - this is only demostration
$date_inv = $_GET[‘invdate‘];

        suboptions = {
            plusicon : "ui-icon-plus",
            minusicon : "ui-icon-minus",
            openicon: "ui-icon-carat-1-sw",
            expandOnLoad:  false,
            delayOnLoad : 50,
            selectOnExpand : false,
            reloadOnExpand : true
        };

// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); 

mysql_select_db($database) or die("Error conecting to db."); 

// construct the query        suboptions = {
            plusicon : "ui-icon-plus",
            minusicon : "ui-icon-minus",
            openicon: "ui-icon-carat-1-sw",
            expandOnLoad:  false,
            delayOnLoad : 50,
            selectOnExpand : false,
            reloadOnExpand : true
        };

$SQL = "SELECT item_num, item, qty, unit FROM invlines WHERE invid=".$id." ORDER BY item";
$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error()); 

// set the header information
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
            header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
            header("Content-type: text/xml;charset=utf-8");
} 

echo "<?xml version=‘1.0‘ encoding=‘utf-8‘?>";
echo "<rows>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
            echo "<row>";
            echo "<cell>". $row[item_num]."</cell>";
            echo "<cell><![CDATA[". $row[item]."]]></cell>";
            echo "<cell>". $row[qty]."</cell>";
            echo "<cell>". $row[unit]."</cell>";
            echo "<cell>". number_format($row[qty]*$row[unit],2,‘.‘,‘ ‘)."</cell>";
            echo "</row>";
}
echo "</rows>";

?>

启用/禁用子表格

子表格可以动态的启用或者禁用。

//禁用子表格:
jQuery("#grid_id").hideCol(‘subgrid‘);
//启用子表格:
jQuery("#grid_id").showCol(‘subgrid‘);

示例说明

• grid_id：父表格的id
• subgrid ：固定的参数，不要设置其他内容

要动态设置子表格是否可用，需要配置父表格的subGrid为true，要不上面的代码没有效果