jqGrid PHP Demo

Info
HTML
PHP

You can show any level of nested subgrids (master detail) inside a parent grid. Just set the $grid->setSubGridGrid("subgrid.php"); property of the parent grid to "Parent" for the parent grid and to "Child" for the child ones.

Create your subgrid in subgrid.php as normal grid and all is done. You just need to accept the parameter passed from the paraent

Complete hierarchy is achieved in this example with just 1 lines of code - and additinal 1 file for the subgrid


<?php
require_once '../../../tabs.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/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.js" type="text/javascript"></script>
    <script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>
    <script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui-custom.min.js" type="text/javascript"></script>
  </head>
  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <br/>
      <?php tabs(array("grid.php","subgrid.php"));?>
   </body>
</html>

grid.php.


<?php
ini_set("display_errors",1);
require_once '../../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridArray.php";


// Connection to to your server server
$myconn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

function get_main_grid(){
global $myconn, $customers;
$myconn->query("SET NAMES utf8");
//execute the query specifical to your database
$sth = $myconn->prepare('SELECT CustomerID, CompanyName, ContactName, Phone, City FROM customers');
$sth->execute();
// get the data as array. Nothe the the customer array 
// is passed in the select command
$customers = $sth->fetchAll(PDO::FETCH_ASSOC);
// end of custom code
//var_dump($customers);
// create the array connection
$conn = new jqGridArray();
// Create the jqGrid instance
$grid = new jqGridRender($conn); 

// Write the SQL Query
$grid->SelectCommand = 'SELECT * FROM customers';
// Set the table to where you update the data
$grid->table = 'customers';
// Set output format to json
$grid->dataType = 'json';
$grid->setPrimaryKeyId("CustomerID");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "height"=>250,
    "rowList"=>array(10,20,30),
    "sortname"=>"CustomerID"
));
$grid->setColProperty('CustomerID', array("label"=>"ID", "width"=>50));
$grid->setSubGridGrid("subgrid.php");
// Enable navigator
$grid->navigator = true;
// Enable only editing
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
}

//call the function
get_main_grid();
?>

subgrid.php.


<?php
require_once '../../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
//require_once ABSPATH."php/jqGridPdo.php";
require_once ABSPATH."php/jqGridArray.php";




// Get the needed parameters passed from the main grid
// By default we add to postData subgrid and rowid parameters in the main grid
$subtable = jqGridUtils::Strip($_REQUEST["subgrid"]);
$rowid = jqGridUtils::Strip($_REQUEST["rowid"]);

// Custom connection and query
$myconn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$myconn->query("SET NAMES utf8");
//execute the query specifical to your database
$sth = $myconn->prepare('SELECT OrderID, RequiredDate, ShipName, ShipCity, Freight FROM orders WHERE CustomerID = "'.$rowid.'"');
//$sth->bindParam(1,$rowid);
$sth->execute();
// get the data as array. Nothe the the customer array 
// is passed in the select command
$orders = $sth->fetchAll(PDO::FETCH_ASSOC);
// end of custom code

if(count($orders) == 0) return "[]";

// create the array connection
$conn = new jqGridArray();



if(!$subtable && !$rowid) die("Missed parameters");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = "SELECT * FROM orders";
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('subgrid.php');
// Set some grid options
$grid->setGridOptions(array(
    "width"=>540,
    "rowNum"=>10,
    "sortname"=>"OrderID",
    "height"=>110,
    "postData"=>array("subgrid"=>$subtable,"rowid"=>$rowid)));
// Change some property of the field(s)
$grid->setColProperty("RequiredDate", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false
    )
);
$grid->navigator = true;
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>false,"del"=>false,"view"=>false));
// Enjoy
$subtable = $subtable."_t";
$pager = $subtable."_p";
$grid->renderGrid($subtable,$pager, true, null, null, true,true);
$conn = null;
?>