Note: this integration is done with cakephp 1.1. but it can be simply convert to Cakephp 1.2
Before the integration, we assume you have some basic idea of cakephp and jqgrid, such as what is MVC model , what is html helper in cakephp. And at least you have tried to use jqgrid before. If your answer is no, I bet this tutorial is not for you. And also bear with my unprofessional English writing. Let us take a look at some basis of cakephp and jqgrid.
In jqgrid , two parameters are very important , one is “url” which it gets data from when it is initiated.
The other one is “editurl” ,it posts data to server through this url via ajax when doing add,delete,edit and search, and gets data back from server after.
In cakephp , to give a url link, we use html helper($html->url(”)). And we use $this->autoRender=false to tell controller not to search a view page.
Let’s get started, we are going to make a simple grid called apple. And its fields are just id and name.
Firstly, please go to your cakephp app folder to make your apple’s model, controller, and view. Of course right now you have only one view, which is apples/index.xhtml. for apples_controller, make one default action index(),which does nothing.
Now, we have basic cakephp app structure for apple to get started. Open your index.xhtml file and place our regular jqgrid in the page. So we have below codes in apples/index.xhtml:
</code></code></code></code></code></code></code>
<code> </code>
<code><code> </code>
<code><script>
jQuery("#list").jqGrid(
{ url:'server.php',
datatype: "xml",
colNames:['Id','Name''],
colModel:[ {name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Simple data manipulation",
editurl:"someurl.php" });
jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true});
</script>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" ></div>
<code>
Two important jqgrid parameters are highlighted, and we are going to use cakephp’s html helper to gives these two url links.
Replace ‘server.php’ with <?php echo $html->url(’/apples/indextable) ?>.
And Replace ‘someurl.php’ with <?php echo $html->url(’/presses/indexedit’) ?>.
So now we have below codes in our apples/index.xhtml:
</code></code></code></code></code></code></code>
<code><code><script>
jQuery("#list").jqGrid(
{ url:'<?php echo $html->url('/apples/indextable) ?>',
datatype: "xml",
colNames:['Id','Name'],
colModel:[ {name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#pager'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Simple data manipulation",
editurl:" <?php echo $html->url('/apples/indexedit') ?>" });
jQuery("#list").navGrid("#pager",{edit:true,add:true,del:true});
</script>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" ></div>
So now we have actually done the front end integration.
From apples/index.xhtml codes , we can tell, apple controller will need to have two action indextable and indexedit, and apple controller will have only one views called indextable.xhtml.
because indexedit.xhtml will be just a page to update database, we don’t need a view for it.
Open up controllers/apples_controller, add one function indextale(), this is the function where we will get jqgrid data from our database.
So in apples_controller , we have codes below:
</code></code></code></code></code></code></code>
<code><code>class ApplesController extends AppController
{
var $name = 'Apples';
var $helpers = array('Html', 'Ajax', 'Javascript','Form');
function index()
{
}
Function indextable()
{
$this->layout= 'empty';
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit =$this->params['url']['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx =$this->params['url']['sidx'];
// sorting order - at first time sortorder
$sord =$this->params['url']['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// calculate the number of rows for the query. We need this for paging the result
$row = $this->Press->findCount();
$count = $row;
// calculate the total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$limit_range = $start.",".$limit;
$sort_range = $sidx." ".$sord;
$result = $this ->Apple->findAll(null,"id,name",$sort_range,$limit_range,1,null);
$this->set('result',$result);
$this->set('page',$page);
$this->set('total_pages',$total_pages);
$this->set('count',$count);
}
}
After getting data from function indextable, we can now have our view for indextable, so now go to views/apples,
and create our view for function indextable(indextable.xhtml). and in indextable.xhtml. we form xml data for jqgrid.
So in indextable.xhtml , we have codes below:
</code></code></code></code></code></code></code>
<code><code><?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
for($i=0;$i<sizeof($result);$i++){
echo "<row id='".$result[$i]['Apple']['id']."'>";
echo "<cell>". $result[$i]['Apple']['id']."</cell>";
echo "<cell>". $result[$i]['Apple']['name']."</cell>";
echo "</row>";
}
echo "</rows>";
?>
Now we have completed function indextable() in apples_controller, now we need to implement indexedit() function.
This is the function, where we do add,edit, delete in jqgrid.
Firstly , create function indexedit() in apples_controller, so we have codes below:
</code></code></code></code></code></code></code>
<code><code>class ApplesController extends AppController
{
var $name = 'Apples';
var $helpers = array('Html', 'Ajax', 'Javascript','Form');
function index()
{
}
Function indextable()
{
$this->layout= 'empty';
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit =$this->params['url']['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx =$this->params['url']['sidx'];
// sorting order - at first time sortorder
$sord =$this->params['url']['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// calculate the number of rows for the query. We need this for paging the result
$row = $this->Apple->findCount();
$count = $row;
// calculate the total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$limit_range = $start.",".$limit;
$sort_range = $sidx." ".$sord;
$result = $this ->Apple->findAll(null,"id,name",$sort_range,$limit_range,1,null);
$this->set('result',$result);
$this->set('page',$page);
$this->set('total_pages',$total_pages);
$this->set('count',$count);
}
function indexedit()
{
//pr($this->params);
//$this->layout= 'empty';
$this->autoRender = false;
$action = $this->params["form"]["oper"];
//pr($action);
if($action=="edit")
{
$id=$this->params["form"]["id"];
$title = $this->params["form"]["name"];
$this->Apple->save(Array("id"=>$id,"title"=>$title),null,null);
}
if($action=="del")
{
//pr($this->params);
$id=$this->params["form"]["id"];
//For Multiple Deletion
$exploded_id = explode(',', $id);
for($i=0;$i<sizeof($exploded_id);$i++)
{
$this->Apple->del($exploded_id[$i]);
}
//For Multiple Deletion
//single deletion : $this->Apple->del($id);
}
if($action =="add")
{
$title = $this->params["form"]["title"];
$this->Apple->save(Array("name"=>$title),null,null);
}
}
}
Till now, integration is done; you should be able to see a nice apple jqgrid table. Thanks for your reading.
If you still have any doubts, do let me know.
admin CakePHP+JQuery
