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,要不上面的代码没有效果

你可能感兴趣的:(jqGrid subGrid配置 如何首次加载动态展开所有的子表格)