jqGrid PHP Demo

Info
HTML
PHP

One of the ways to edit data is by using the Edit Dialog functionality. You can launch Edit Dialog by selecting a row and then clicking on the "Edit" button in the grid toolbar (bottom left in this example). For this, you need to have navigator enabled.

As of version 4.8 it is possible to customize the form in a way that you want. To place the jqGrid editable fields it is needed to enclose the name form colModel in {}

Also you can add a custom button and attach a code to it when the form is created.

Please, take a look at the code in the PHP tab for additional details.


<?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);
// 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';
// 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)));
// Enable navigator
$grid->navigator = true;
// Enable only editing
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>false,"edit"=>true,"del"=>false,"view"=>false, "search"=>false));
// Close the dialog after editing
$template = "<div style='margin-left:15px;'><div> Customer ID <sup>*</sup>:</div><div> {CustomerID} </div>";
$template .= "<div> Company Name: </div><div>{CompanyName} </div>";
$template .= "<div> Phone: </div><div>{Phone} </div>";
$template .= "<div> Postal Code: </div><div>{PostalCode} </div>";
$template .= "<div> City:</div><div> {City} </div>";
$template .= "<hr style='width:100%;'/>";
$template .= "<div> {sData} {cData}  </div></div>";
$grid->setNavOptions('edit',array(
    "closeAfterEdit"=>true,
    "height"=>"auto",
    "dataheight"=>"auto",
    "template"=>$template,
    "editCaption"=>"Update Customer",
    "bSubmit"=>"Update"
));

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

?>