Cell formatters are a set of predefined formatters that can be applied to cells. They will format the cell text on the client-side and present it in a specific way. The list of currently available cell formatters includes Integer, Number, Currency, CheckBox, Link and Mail.
Each formatter comes with its own set of properties, e.g. thousands separator, decimal places, target for links, etc. Please, take a look at the PHP tab for samples.
<?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";
// Create the jqGrid instance
$grid = new jqGridRender();
// Lets create the model manually
$Model = array(
array("name"=>"Integer","width"=>80,
"formatter"=>"integer",
"formatoptions"=>array("thousandsSeparator"=>","), "sorttype"=>"integer"),
array("name"=>"Number","width"=>80,
"formatter"=>"number", "formatoptions"=>array("decimalPlaces"=>1), "sorttype"=>"number"),
array("name"=>"Currency","width"=>80,
"formatter"=>"currency",
"formatoptions"=>array("decimalPlaces"=>1,"thousandsSeparator"=>",","prefix"=>"$","suffix"=>" USD"), "sorttype"=>"currency"),
array("name"=>"Email","width"=>120,"formatter"=>"email"),
array("name"=>"Link","width"=>120,"formatter"=>"link"),
array("name"=>"Checkbox","width"=>50,"formatter"=>"checkbox")
);
// Let the grid create the model
$grid->setColModel($Model);
// Set grid option datatype to be local
$grid->setGridOptions(array("datatype"=>"local"));
//We can add data manually using arrays
$data = array(
array("Integer"=>200000,"Number"=>60000000.73,"Currency"=>34.2,"Email"=>"john.smith@yahoo.com","Link"=>"http://www.yahoo.com","Checkbox"=>"Yes"),
array("Integer"=>1600000,"Number"=>75200000.23,"Currency"=>245.2,"Email"=>"joe.woe@google.com","Link"=>"http://www.google.com","Checkbox"=>"Yes"),
array("Integer"=>652693,"Number"=>34534000.33,"Currency"=>18545.2,"Email"=>"julia.bergman@bing.com","Link"=>"http://www.bing.com","Checkbox"=>"No"),
array("Integer"=>1237,"Number"=>3450.30,"Currency"=>55597545.2,"Email"=>"roy.corner@msn.com","Link"=>"http://www.msn.com","Checkbox"=>"No")
);
// Let put it using the callGridMethod
$grid->callGridMethod("#grid", 'addRowData', array("Integer",$data));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);