This exmple is the same as previous, but it uses a client side chaching.
This way we made less request to the server.
This is done just with setting a option cache on the setAutoomplete method.
If you write some letter on ShipName then try to close and open the form again
and write the same letter combinations. You will notice that there is no request
to the server.
<?php
require_once '../../../tabs.php';
?>
<!DOCTYPE html>
<html>
<head>
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 62.5%;
}
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
#tags {z-index: 900}
</style>
<title>jqGrid PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../themes/ui.jqgrid.css" />
<script src="../../../js/jquery.js" type="text/javascript"></script>
<script src="../../../js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../../js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</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
require_once ABSPATH."php/jqGridPdo.php";
// include the autocomplete class
require_once ABSPATH."php/jqAutocomplete.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';
$grid->table ="orders";
$grid->setPrimaryKeyId("OrderID");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
"caption"=>"Autocomplete client side caching",
"rowNum"=>10,
"sortname"=>"OrderID",
"hoverrows"=>true,
"rowList"=>array(10,20,50),
));
// Change some property of the field(s)
$grid->setColProperty("OrderID", array("label"=>"ID", "width"=>60));
$grid->setColProperty("OrderDate", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
)
);
// set autocomplete. Serch for name and ID, but select a ID
// set it only for editing and not on search. Also set the cache option
$grid->setAutocomplete("ShipName",false,"SELECT DISTINCT ShipName FROM orders WHERE ShipName LIKE ? ORDER BY ShipName",array("cache"=>true),true,false);
$grid->datearray = array('OrderDate');
// Enjoy
$grid->navigator = true;
$grid->setNavOptions('navigator', array("search"=>false, "excel"=>false, "add"=>false, "del"=>false));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
?>