jqGrid PHP Demo

If one of the predefined cell formatters (integer, link, email, number, currency, checkbox) is not suitable in your scenario, you can use custom formatters.

With custom formatters you can define your own javascript client-side format and unformat functions. Format function are used to display the cell and unformat is used to unformat the cell in display mode and show it in edit mode.
Note the using of the special tag "js:" in PHP code before the definition of the formatter function.
This tell the grid instance that this is a JS function which should be executed.
In the setJSCode you can write valid JS code. The code is putted at end of
all grid executions.


<?php 
require_once '../../../../php/demo/tabs3.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';

    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    </script>
     
  </head>
  <body>
    <div style="margin-left:20px">
          <?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

// Create the jqGrid instance
$grid = new jqGridRender();
// Lets create the model manually and set the formatters
$Model = array(
    array("name"=>"ID","width"=>50, "key"=>true),
    array("name"=>"PhotoFileName","width"=>100),
    array("name"=>"Photo","width"=>100,"formatter"=>"js:formatImage", "unformat"=>"js:unformatImage"),
    array("name"=>"Rating","sorttype"=>"integer","formatter"=>"js:formatRating","unformat"=>"js:unformatRating")
);
// Let the grid create the model
$grid->setColModel($Model);
//We can add data manually using arrays
$data = array();
for($i=0;$i<9;$i++)
{
    $data[] = array("ID"=>$i+1,"PhotoFileName"=>($i+1).".jpg","Photo"=>($i+1).".jpg", "Rating"=>rand(-20,30));
}
// Set grid option datatype to be local
// Add a data using a data option
$grid->setGridOptions(array(
    "datatype"=>"local", 
    "width"=>400,
    "height"=>350,
    "data"=>$data
));

// We can put JS from php
$custom = <<<CUSTOM
function formatImage(cellValue, options, rowObject) {
    var imageHtml = "<img src='images/" + cellValue + "' originalValue='" + cellValue + "' />";
return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
    return $(cellObject.html()).attr("originalValue");
}
function formatRating(cellValue, options, rowObject) {
    var color = (parseInt(cellValue) > 0) ? "green" : "red";
    var cellHtml = "<span style='color:" + color + "' originalValue='" +
                   cellValue + "'>" + cellValue + "</span>";
    return cellHtml;
}
function unformatRating(cellValue, options, cellObject) {
    return $(cellObject.html()).attr("originalValue");
}
CUSTOM;
// Let set the code which is executed at end
$grid->setJSCode($custom);
$grid->renderGrid('#grid','#pager',true, null, null, true,true);