Inserting a record into the database table with jqGridEdit class is quite easy. Three things should be done - specify a table, set the parimary key (optional specify if the primary key is serial) and and call the method insert with the data posted from the grid.

It is important to note that the data array passed for inserting should contain key elements which correspond to the names in the table. In terms of jqGrid this is a name property in colModel.

We will demontrate this with example. We will use as base our example:

Let suppose that we want only to insert a record in the orders table. For this purpose we will use the navigator and into the navigator we will enable only add form. Here is the code.

<!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", editable:true},
     {"name":"CustomerID","index":"CustomerID", editable:true},
     {"name":"Freight","index":"Freight", editable:true},
     {"name":"ShipName","index":"ShipName", editable:true}
],
"url":"querygrid.php",
"datatype":"json",
"jsonReader":{repeatitems:false},
"pager":"#pager",
// now we should set the url where we post the data
// in this case the same url
"editurl": "querygrid.php"
});
// Set navigator with adding record and search enabled.
jQuery("#grid").jqGrid('navGrid','#pager',{add:true,edit:false,del:false});
......
});
</script>

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

As can be ssen we have made a lot of the fields editable setting the property of the grid editable to true.
Another important settings here is in the field OrderID. This field is field is not editable, because it is defined as serial in the database, so we do not need to post them to the server.
When we do this the field will not appear in the form where we add a data.

The changes in the PHP code:

<?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 jqGridEdit instance
$grid = new jqGridEdit($conn);

// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
$grid->dataType = "json";

// We should determine if we add a record.
// jqGrid send oper to identify the operation performed
// in this case we should check for add

$oper = $_POST['oper'];
if($oper == 'add') {
   $grid->table = 'orders';
   $grid->setPrimaryKeyId('OrderID');
   $data = $_POST;
   $grid->insert($data);
} else {
   $grid->queryGrid();
}
?>

Another usefull feature here is that you can insert on other table just set it after the first insert and primary key too and do the insert.
Something like this


<?php
...
$oper = $_POST['oper'];
if($oper == 'add') {
   $grid->table = 'orders';
   $grid->setPrimaryKeyId('OrderID');
   $data = $_POST;
   $grid->insert($data);

   $grid->table = 'othertable'
   $grid->setPrimaryKeyId('otherid');
   $grid->insert($otherdata);
} else {
   $grid->queryGrid();
}
?>