In this case the first parameter of these methods should refer to to the appropriate editing module (add, edit, del).
$grid->setNavOptions('add',array(...)); $grid->setNavOptions('edit',array(...));
or
$grid->setNavEvent('add','java_script_code_here'); $grid->setNavEvent('edit','java_script_code_here');
The list of available editing options are:
For the full list of available options and events, please refer to the appropriate topics in jqGridRender Class
In this Tutorial we will consider two common tasks:
For this purpose we will use this example as a starting point.
<?php require_once 'jq-config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the 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, ShipName, Freight FROM orders'; // Set output format to json $grid->dataType = 'json'; //set a table to be manipulated $grid->table = 'orders'; // set the primary key - it is serial $grid->setPrimaryKeyId('OrderID'); // Let the grid create the model $grid->setColModel(); // Set the url from where we obtain and edit the data $grid->setUrl('grid.php'); //do not allow this field to be editable $grid->setColProperty('OrderID',array("editable"=>false)); // Set some grid options $grid->setGridOptions(array( "rowNum"=>10, "rowList"=>array(10,20,30), "sortname"=>"OrderID" )); // enable form editing $grid->navigator = true; $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?>
Lets consider the script with the commands:
$grid->table = 'orders'; $grid->setPrimaryKeyId('OrderID');
We tell the script which is the table against which we should perform CRUD operation. We also define the primary key and that the key is serial (autoincrement)
$grid->setUrl('grid.php');
We tell the script that CRUD operations and query operations will be handled by the "grid.php" code file.
$grid->setColProperty('OrderID',array("editable"=>false));
With this command we disable the editing of the primary key, but the field is still visible in the grid.
This is all the is needed to get automatic CRUD operation with jqGrid for PHP. The key command that does the magic here is:
$grid->setPrimaryKeyId('OrderID');
Setting this in the script tells the grid to post the appropriate values when a CRUD operation is in action.
For this purpose we will use the table "customers", where the table has a primary key, but this primary key is not serial and when the data is inserted the user should fill this key.
<?php require_once 'jq-config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the 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 CustomerID, CompanyName, Phone, PostalCode, City FROM customers'; // Set the table to where you update the data $grid->table = 'customers'; $grid->setPrimaryKeyId('CustomerID'); $grid->serialKey = false; // Set output 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('grid.php'); // Set some grid options $grid->setGridOptions(array( "rowNum"=>10, "rowList"=>array(10,20,30), "sortname"=>"CustomerID" )); $grid->setColProperty('CustomerID', array("editoptions"=>array("readonly"=>true), "editrules"=>array("required"=>true))); $enableadd = <<<ENBLADD; function(formid) { jQuery('#CustomerID',formid).removeAttr("readonly"); } ENBLADD; $disableedit = <<<DSBLEDIT; function(formid) { jQuery('#CustomerID',formid).attr("readonly","readonly"); } DSBLEDIT; $grid->setNavEvent('add','beforeShowForm',$enableadd); $grid->setNavEvent('edit','beforeShowForm',$disableedit); // Enable navigator $grid->navigator = true; $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?>
The only diffrence with the first tutorial is that in this case we set two custom events in add and edit mode. In this case we use beforeShowForm. In add mode we enable the input in the element removing the readonly attribute.
In edit mode we disable the input using setting the input element to have readonly attribute.