INSTALL
jqGrid for PHP - quick installation guide
System Requirments.
1. PHP 5.1 or higger
2. PDO installed driver (MySQL or PostgreSQL) - in the example we use MySQL
3. Web Server
4. Web browser
Download jqGrid PHP files and northwind database (SQL dump)
from: http://www.trirand.net/download.aspx. The package contain all the needed
to begin working with the component
Import the nortwind database in your MySQL server.
Open the jq-config.php and enter the needed information - database user and password
If you have other name for the northwind database change the name in DB_DSN definition
The directory structure is as follow
examples
js
php
themes
example directory contain all the examples
js directory contain all the needed javascript files - jquery library, jqgrid library
and jQuery UI javascript files.
php directory contain the jqGrid PHP files
themes directory contain by default the redmond theme used into the examples.
1. In order to create quick test example create a php file in the root directory name it
by example myjqgridphp.php (can be any other name ending with php extension)
<!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>My First PHP jqGrid </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.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>
</head>
<body>
......
<?php include "myfirstgrid.php" ?>
.......
</body>
</html>
Create the file myfirstgrid.php in the same directory and write the following:
<?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);
// 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 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('myfirstgrid.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
"caption"=>"This is custom Caption",
"rowNum"=>10,
"sortname"=>"OrderID",
"hoverrows"=>true,
"rowList"=>array(10,20,50),
));
// 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
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>
That is all.
2. If you need that jqGrid does not create the table and pager elements automatically
- open the myjqgridphp.php and add the following
.....
<body>
......
<table id='grid'></table>
<div id='pager'></div>
<?php include "myfirstgrid.php" ?>
.......
</body>
then instruct renderGrid in myfirstgrid.php not to create the elements - this is done setting
the last two parameters to false - i.e.
$grid->renderGrid('#grid','#pager',true, null, null, false,false);
3. You can place the generated jqGrid configuration in document ready function
For this purpose you will need to include the "myfirstgrid.php" in the script
section and instruct renderGrid not to create the script tag automatically
Changes in myjqgridphp.php
....
<script type="text/javascript">
jQuery(document).ready(function(){
.....
<?php include "myfirstgrid.php" ?>
...
});
</script>
</head>
<body>
......
<table id='grid'></table>
<div id='pager'></div>
.......
</body>
</html>
Changes in myfirstgrid.php - the third parameter tell not to generate the script tag.
....
$grid->renderGrid('#grid','#pager',false, null, null, false,false);
|
