jqGrid PHP Demo

Info
HTML
PHP

By default Edit Dialog places the edit fields vertically, one at a line and in the order columns are defined in the grid. Sometimes we may need to change that. The properties that control this behaviour are available for each JQColumn, example:

$grid->setColProperty('Phone',array("formoptions"=>array("rowpos"=>1,"colpos"=>2)));
$grid->setColProperty('CompanyName',array(
"formoptions"=>array("label"=>"Company","elmsuffix"=>"(required)"),
"editrules"=>array("required"=>true))
);

colpos - defines the column position of the field edit control
rowpos - defines the row position of the field edit control

Note that you can have several edit controls on the same line, just make sure they have the same rowpos, but different colpos.

label - the label to display for editing. If not set, the column DataField (column name) is used
elmpreffix - what to display before the edit control
elmsuffix - what to display after the edit control


<?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"
));
// Set the custom code for the fields
$grid->setColProperty('CustomerID', array("editoptions"=>array("readonly"=>true)));
$grid->setColProperty('Phone',array("formoptions"=>array("rowpos"=>1,"colpos"=>2)));
$grid->setColProperty('CompanyName',array(
    "formoptions"=>array("label"=>"Company", "elmsuffix"=>"(required)"),
    "editrules"=>array("required"=>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));
// Some options for the edit
$grid->setNavOptions('edit',array("closeAfterEdit"=>true,"width"=>470,"height"=>'auto',"dataheight"=>'auto'));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>