jqGrid subGrid配置 如何首次加載動態展開全部的子表格

         有時候需求須要默認加載表格的時候把子表格的數據也顯示出來，通過研究相關SubGrids API配置以下：

屬性	類型	描述	默認值
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 ），下面示例展現實現：

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

顯示每行數據中的詳細數據，並把子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，要不上面的代碼沒有效果