Thursday, December 29, 2011

jqgrid datatype:xml sql server driver, example of adding/amending footer/summary

*** javascript (prepare the grid) ***
jQuery("#grid1").jqGrid({
url:"server.php?q=1",
datatype:"xml",
colNames:[...'Amount'...],
colModel:[
...
{name:'amt',index:'amt', width:30, align:"right",sorttype:"float", formatter:"number"}
...
],
...
footerrow : true,
userDataOnFooter : true

...
});
//

*** server.php (construct the result set for the grid) ***

echo "<rows>";
...
$l_totalamt=0;
while ($row = sqlsrv_fetch_array($stmt)){
echo "<row id="".$row['id']."'>";
echo "<cell></cell>";
...
echo "<cell>".$row['amt']."</cell>";
$l_totalamt=$l_totalamt+$row['amt'];
...
echo "</row>";
}
echo "<userdata name="amt">".$l_totalamt."</userdata>"; //construct the footer
echo "</rows>";
//

*** javascript (amend the footer, 'amount total' in this example)***
...
var dataIds = $('#grid1').jqGrid('getDataIDs');
var totalamt=0;
for (var i = 0; i < dataIds.length; i++) {
//Get row data
var data = $('#grid1').jqGrid('getRowData', dataIds[i]);
totalamt = totalamt+parseFloat(data.amt);
}
jQuery('#grid1').jqGrid('footerData','set',{amt:totalamt});

No comments: