JavaScript DHTML/Rico/Ajax

Материал из Web эксперт
Перейти к: навигация, поиск

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>