In some cases, the default sorting mechanism of jqGrid is not exactly what you need to achieve.
In this case, you can use the onSortCol event to perform your custom sorting and
return the 'stop' which instruct jqGrid not to perform your own sorting.
Please, refer to the PHP code tabs for implementation details.
<?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>
<script src="../../../../js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<div>
<?php include ("grid.php");?>
</div>
<?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 OrderID, OrderDate, CustomerID, Freight, ShipName FROM orders';
// set the ouput 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 the initial sorting column using the sortname oprion
$grid->setGridOptions(array("sortname"=>"OrderID","rowNum"=>10,"rowList"=>array(10,20,30)));
// Change some property of the field(s)
$grid->setColProperty("OrderDate", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
)
);
$sorcol = <<< ONSORTCOL
function (fieldName, columnIndex, sortOrder)
{
// fieldName is the DataField of the column being sorted
// columnIndex is the index of the column (zero bazed)
// sortOrder is a string "asc" or "desc"
// Do here your custom code
if(fieldName=='OrderID') {
// set your own sort
$("#grid").jqGrid('setGridParam',{sortname: 'OrderID '+sortOrder+', OrderDate'});
// trigger the grid
$("#grid").trigger('reloadGrid');
// return stop to prevent other things
return 'stop'
}
}
ONSORTCOL;
$grid->setGridEvent('onSortCol', $sorcol);
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);