标签:mode pad 默认值 定义 pass new cdata cin car
有时候需求需要默认加载表格的时候把子表格的数据也显示出来,经过研究相关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方法将在下面介绍。
事件参数说明
Event | Parameters | Description |
---|---|---|
subGridBeforeExpand | pID, id | 展开子表格前触发。需要返回true/false,返回false阻止展开子表格 |
subGridRowExpanded | pID, id | 展开子表格后触发,用于想子表格添加自定义的数据 |
subGridRowColapsed | pID, id | 收缩子表格后触发,需要返回true/false,返回false不收缩子表格 |
serializeSubGridData | sPostData | 序列化传递给ajax请求的数据,需要返回序列化后的数据。当需要向服务器传递自定义数据时使用,如json/xml格式的字符串等。 |
方法 | 参数 | 返回值 | 描述 |
---|---|---|---|
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‘);
示例说明
要动态设置子表格是否可用,需要配置父表格的subGrid为true,要不上面的代码没有效果
jqGrid subGrid配置 如何首次加载动态展开所有的子表格
标签:mode pad 默认值 定义 pass new cdata cin car
原文地址:http://www.cnblogs.com/qinpengming/p/6193078.html