This is the base jqGrid Class, which is responsible for

  • Delivering data to an already manually constructed (with javascript) jqGrid instance
  • Searching
  • Sorting
  • Paging
  • Simple subgrid support
  • Export to Excel

Using this class requires some javascript knowledge, since the grid should be created in an existing html or php page with javascript declaration. In other words, the jqGrid class will only take care of the server side operations, while all other events and operations at the client side can be defined manually by the developer. More information on jqGrid javascript documentation can be found here
.

In order to illustrate how the jgGrid class can be used, please take a look at the following example:

Note: all examples used in the documentation use the Northwind database, which is included in the installation (download) package as SQL dump.

Create an html file with following content (note, that you will need to declare the grid with javascript if you are using the jqGrid class):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP jqGrid Class Example</title> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
....
// Craeate the grid manually
jQuery("#grid").jqGrid({
"colModel":[
     {"name":"OrderID","index":"OrderID","label":"ID","width":60, "key":true},
     {"name":"OrderDate","index":"OrderDate"},
     {"name":"CustomerID","index":"CustomerID"},
     {"name":"Freight","index":"Freight"},
     {"name":"ShipName","index":"ShipName"}
],
"url":"querygrid.php",
"datatype":"json",
"jsonReader":{repeatitems:false},
"pager":"#pager"
});
// Set navigator with search enabled.
jQuery("#grid").jqGrid('navGrid','#pager',{add:false,edit:false,del:false});
......
});
</script>

</head>
<body>
......
<table id="grid"></table>
<div id="pager"></div>
.......
</body>
</html>

Save the file and the create a file named querygrid.php. Note that this file is used in the url parameter of the grid (defined in the javascript of the html file).

<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the PDO driver class
require_once "php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

// Create the jqGrid instance
$grid = new jqGrid($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
$grid->dataType = "json";
$grid->queryGrid();
?>

That is all. Save the file and run the html file in your browser. Note that paging, searching and sorting are executed automatically by the jqGrid class - no need to write custom code.