有時候需求需要默認加載表格的時候把子表格的數據也顯示出來，經過研究相關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 }
|
|
| 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']}
|
|
| 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，要不上面的代碼沒有效果