Demonstrates how to bind jqGrid to custom Sql Data Source.
The only thing you need to do is to set the SelectCommand property in the PHP code.
Also, all major grid features like sorting (click on a column header), searching (click on the server icon on the bottom toolbar),
paging, etc work as well by default -- no need to code anything.
Column settings can be customized using the setColProperty function.
Columns are automatically created when you associate a declarative datasource with the grid at design time.
You can tweak various column properties, like label (in order to set column header text),
<?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);
// MySQL specific command for the charset
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Data from this SQL is 1252 encoded, so we need to tell the grid
// Set the SQL Data source
$table = 'products';
$grid->SelectCommand ='SELECT * FROM '.$table;
// set the ouput format to XML
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// set labels in the header
$grid->setColProperty("ProductID", array("label"=>"ID"));
$grid->setColProperty("ProductName", array("label"=>"Name"));
$grid->setColProperty("QuantityPerUnit", array("label"=>"Unit"));
$grid->setColProperty("UnitPrice", array("label"=>"Unit Price"));
// We can hide some columns
$grid->setColProperty("SupplierID", array("hidden"=>true));
$grid->setColProperty("CategoryID", array("hidden"=>true));
$grid->setColProperty("UnitsOnOrder", array("hidden"=>true));
$grid->setColProperty("ReorderLevel", array("hidden"=>true));
$grid->setColProperty("Discontinued", array("hidden"=>true));
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array("rowNum"=>10,"rowList"=>array(10,20,30),"sortname"=>"CategoryID"));
// Enable toolbar searching
$grid->toolbarfilter = true;
$grid->setFilterOptions(array("stringResult"=>true));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>