JavaScript DHTML/Rico/Ajax
Substitute a javascript call for an AJAX request in the AjaxSQL buffer
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Rico LiveGrid-JavaScript Buffer</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <link href="rico21/examples/client/css/demo.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> Rico.loadModule("LiveGridAjax","LiveGridMenu","greenHdg.css"); var grid, buffer; Rico.onLoad( function() {
var opts = { frozenColumns : 1, useUnformattedColWidth: false, columnSpecs : [{width:200}] }; buffer=new Rico.Buffer.AjaxSQL(jsfetch); grid=new Rico.LiveGrid ("jsgrid", buffer, opts); grid.menu=new Rico.GridMenu();
}); function jsfetch(options) {
Rico.writeDebugMsg("jsfetch"); var newRows=[], totrows=500; var offset=options.parameters.offset; var limit=Math.min(totrows-offset,options.parameters.page_size) for (var r=0; r<limit; r++) { var row=[]; row.push(new Date().toString()); row.push(offset.toString()); for (var c=2; c<5; c++) row.push("cell "+(r+offset)+":"+c); newRows.push(row); } options.onComplete(newRows,false,totrows);
} </script> <style type="text/css"> div.ricoLG_cell { white-space: nowrap; } </style> </head> <body>
This example demonstrates how to substitute a javascript call for an AJAX request in the AjaxSQL buffer. Rather than passing a string containing the url to the data provider, you pass a function to the Rico.Buffer.AjaxSQL constructor.
buffer=new Rico.Buffer.AjaxSQL(<strong>jsfetch</strong>); function <strong>jsfetch</strong>(options) { var newRows=[], totrows=500; var offset=options.parameters.offset; var limit=Math.min(totrows-offset,options.parameters.page_size) for (var r=0; r<limit; r++) { var row=[]; row.push(new Date().toString()); row.push(offset.toString()); for (var c=2; c<5; c++) row.push("cell "+(r+offset)+":"+c); newRows.push(row); } options.onComplete(newRows,false,totrows); }
Time of Data Fetch | Offset | Column 3 | Column 4 | Column 5 |
---|
</body> </html>
</source>