jqGrid PHP Demo

Info
HTML
PHP

When a column is editable, you can select how end-users will edit it. This is controlled by the edittype property and current has five different options - text, textarea, select, password, checkbox.

In addition to that, you can specify the values end-users will see in name:value pairs in the editoption values property of Columns - this is especially useful for SearchType DropDown. Here is an example

$grid->setColProperty("CustomerID",array("editoptions"=>array("value"=>"1:One;2:Two")));

There is a more easy way - in this case you just need to call setSelect function and set either SQL or array of values.

check the PHP tab for details.
Also in the example we show how the select can be updated from the user - add edit or delete data from it


<?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 require_once("grid.php");?>
      </div>
      <br/>
      <?php tabs(array("grid.php","customer.php","getcustomers.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);
// 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, CustomerID, Freight, OrderDate, ShipCity FROM orders';
// set the ouput format to json
$grid->table = 'orders';
$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"=>"OrderID","height"=>150));
// Change some property of the field(s)
$grid->setColProperty("OrderDate", array(
    "formatter"=>"date",
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
    "search"=>false,
    "editable"=>false
    )
);
$grid->setColProperty("OrderID",array("editable"=>false));
$grid->setColProperty("ShipCity",array("editable"=>false));
// We need custom select since the select should be updated 
// every time
$grid->setColProperty("CustomerID",array( "edittype"=>"select", "editoptions"=>array("dataUrl"=>"getcustomers.php")));

$grid->navigator = true;

//NOTE THE recreateForm
$grid->setNavOptions('navigator', array("del"=>false,"excel"=>false,"search"=>false,"refresh"=>false));
$grid->setNavOptions('edit', array("height"=>'auto',"dataheight"=>"auto","width"=>'auto', "recreateForm"=>true));
$grid->setNavOptions('add', array("height"=>'auto',"dataheight"=>"auto", "width"=>'auto', "recreateForm"=>true));
// Enjoy

$form = <<< FORM
function(){
   var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden" title="Customer Edit"></div>').appendTo('body');
   data = {};
   ajaxDialog.load(
      'customer.php',
       data,
       function(response, status){
           ajaxDialog.dialog({
               width: 'auto',
               modal:true,
               open: function(ev, ui){
                  $(".ui-dialog").css('font-size','0.9em');
               },
               close: function(e,ui) {
                   ajaxDialog.remove();
               }
           });
        }
    );
}
FORM;

$buttonoptions = array("#pager",
    array(
      "caption"=>"Customers",
      "onClickButton"=>"js:".$form
    )
);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

customer.php.


<?php
ini_set("display_errors","1");
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);
// 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 FROM customers';
// set the ouput format to json
$grid->dataType = 'json';
$grid->table ="customers";
$grid->setPrimaryKeyId("CustomerID");
$grid->serialKey = false;
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('customer.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
    //"caption"=>"Customers",
    "rowNum"=>10,
    "sortname"=>"CompanyName",
    "viewrecords"=>false,
    "pginput"=>false
    //"rowList"=>array(10,20,50)
    ));
$grid->setColProperty("CustomerID", array("editrules"=>array("required"=>true)));
$grid->navigator = true;
$grid->toolbarfilter = true;
$grid->setNavOptions('navigator', array("add"=>false,"edit"=>false,"excel"=>false, "search"=>false));
// and just enable the inline
$grid->inlineNav = true;
$grid->renderGrid('#grid2','#pager2',true, null, null, true,true);

getcustomers.php.


<?php
ini_set("display_errors","1");
require_once '../../jq-config.php';
// include the jqGrid Class
//require_once ABSPATH."php/PHPSuito/jqGridUtils.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);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

$s = "<select>";
$q = jqGridDB::query($conn,"SELECT CustomerID, CompanyName FROM customers ORDER BY CompanyName");
while($row= jqGridDB::fetch_num($q)) {
    $s .= "<option value='".$row[0]."'>".$row[1]."</option>";
}
$s .= "</select>";
echo $s;