Header grouping is a way to add a additional column above the header grid rows,
so that they are grouped of desired way.
Grouping of the header should be used after the grid is created.
For this purpose we have created a method which is called setGroupHeaders.
We support two type of grouping - with colSpan enabled and colSpan disabled.
If the colSpan is disabled (the default) the headers that do not have grouping have a additional cell above it.
If the colSpan is enabled there is no additional cell above the non-grouped column and it is considered as one column.
Below is a example with colSpan option set to true
<?php
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<script src="../../../../js/jquery.min.js" type="text/javascript"></script>
<script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.jgrid.defaults.width = "700";
</script>
<script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<br/>
<?php tabs(array("grid.php"));?>
</body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName, ShipCity, ShipCountry FROM orders';
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model from SQL query
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set alternate background using altRows property
$grid->setGridOptions(array(
"rowNum"=>10,
"sortname"=>"OrderID",
"rowList"=>array(10,20,50),
"height"=>'auto'
));
// Change some property of the field(s)
$grid->setColProperty("OrderID", array("label"=>"ID", "width"=>60));
$grid->setColProperty("OrderDate", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
)
);
// Enjoy
// Set grouping header using callGridMethod
$grid->callGridMethod("#grid", "setGroupHeaders", array(array(
"useColSpanStyle"=>true,
"groupHeaders"=>array(
array(
"startColumnName"=>'OrderID',
"numberOfColumns"=>2,
"titleText"=>'Order Info'
),
array(
"startColumnName"=>'ShipName',
"numberOfColumns"=>3,
"titleText"=>'Shipping Details'
)
)
)));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);