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 '../../../tabs.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../themes/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.js" type="text/javascript"></script>
    <script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    </script>
    <script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery-ui-custom.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/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',truenullnulltrue,true);
?>