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 '../../../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";
// 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);
?>