This example show how we can add additional column into the grid to define the three actions for each row.
This can be done at server side and at client side. This example shows a client side solution.
To do that we use the getDataIDs, setRowData and loadComplete methods.
E - means edit, S - mens Save and C - cancel Editing
Note: Due to security reasons data is not saved to this server.
HTML
<![CDATA[
...
<table id="rowed2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="prowed2" class="scroll" style="text-align:center;"></div>
<br />
<script src="rowedex2.js" type="text/javascript"> </script>
]]>
Java Scrpt code
<![CDATA[
...
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act',index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
imgpath: gridimgpath,
pager: jQuery('#prowed2'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
loadComplete: function(){
var ids = jQuery("#rowed2").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=jQuery('#rowed2').editRow("+cl+"); />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=jQuery('#rowed2').saveRow("+cl+"); />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=jQuery('#rowed2').restoreRow("+cl+"); />";
jQuery("#rowed2").setRowData(ids[i],{act:be+se+ce})
}
},
editurl: "server.php",
caption:"Custom edit "
}).navGrid("#prowed2",{edit:false,add:false,del:false});
]]>
PHP with MySQL
<![CDATA[
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array("",$row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
echo json_encode($responce);
...
]]>