JQuery - Oggetto JQGrid
Succede sovente di dover lavorare con delle griglie all'interno di una pagina web, potremmo usare le tabelle, ma non sono certamente così accattivanti e comode da usare come invece le JQGrid.
Alla seguente pagina http://www.lazaruspascal.it/index.php?page=101 trovate i link per scaricare i sorgenti in maniera da integrare le JQuery UI all'interno dei vostri progetti.
Requisiti: Per usare l'oggetto JQGrid si necessita di conoscere il funzionamento dell'oggetto TSpiderAction ( http://www.lazaruspascal.it/index.php?page=90 ) e dell'oggetto Template ( http://www.lazaruspascal.it/index.php?page=103 ).
Per prima cosa apriamo un nuovo progetto CGI (se non sappiamo come fare leggere qui http://www.lazaruspascal.it/index.php?page=87 ) che chiamiamo JGrid.
Ora aggiungiamo al progetto i seguenti due oggetti, che troviamo nella "Tab" "FreeSpider"
sa_GetData: TSpiderAction;
SpiderCGI1: TSpiderCGI;
Bene nell'evento OnRequest dell'oggetto SpiderCGI1 inseriamo il seguente codice
procedure TDataModule1.SpiderCGI1Request(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
var
JQGrid: TJQGrid;
Template: THtmlTemplate;
begin
{Creo il template per far visualizzare la griglia}
Template:= THtmlTemplate.Create('jqdata/template.html');
Template.Tags.Add('', '/js/');
Template.Tags.Add('', '/jquerydata/');
Template.Load;
JQGrid:= TJQGrid.Create; {creo la griglia}
JQGrid.Width:= 1000; {dico quanto deve essere larga la griglia}
JQGrid.Rows:= 20; {dico quante righe deve avere la griglia}
JQGrid.HtmlTableID:= 'list'; {attribuisco un id all'oggetto griglia, serve per i css}
JQGrid.Url:= '/cgi-bin/JGrid/GetData'; {dico a quale percorso devo andare a reperire i dati da visualizzare all'interno della griglia. Va cambiato in base alle vostre impostazioni}
With JQGrid.AddColumn Do {aggiungo una colonna}
begin
Title:= 'Column 1'; {imposto cosa voglia esca scritto sulla colonna}
Name:= 'Col1'; {imposto il nome della colonna}
IsSortable:= true; {dico che la colonna può essere ordinabile}
end;
With JQGrid.AddColumn Do
begin
Title:= 'Column 2';
Name:= 'Col2';
IsSortable:= false; {dico che la colonna non può essere ordinabile}
end;
Template.AddExtraJavaScript(JQGrid.Content); {aggiunto la griglia al template}
response.Add(Template.Content); {stampo sul foglio html che finisce sul browser del client il contenuto dell'oggetto template}
Template.Free; {libero l'oggetto template}
JQGrid.Free; {libero l'oggetto JQGrid}
end;
Mentre nell'evento OnRequest dell'oggetto sa_GetData inseriamo il seguente codice
procedure TDataModule1.sa_GetDataRequest(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
Var
i: integer;
Start, Page, Limit, Count, TotalPages: integer;
begin
Count:= 10001; {dico quante righe in totale ho a disposizione}
{mi recupero il numero di righe da restituire}
if Request.Query('rows') <> '' then
Limit:= StrToInt(Request.Query('rows'))
else
Limit:= 0;
{mi recupero il numero di pagina che devo visualizzare}
if Request.Query('page') <> '' then
Page:= StrToInt(Request.Query('page'))
else
Page:= 1;
{mi recupero il numero totale di pagine}
if (Count > 0) and (Limit > 0) then
TotalPages:= ceil(Count/Limit)
else
TotalPages:= 0;
if (Page > TotalPages) then
Page:= TotalPages;
{Mi calcolo il record iniziale da visualizzare}
Start:= Limit * Page - Limit;
if Start < 0 Then Start:= 0;
{creo il contenuto da far vedere nella griglia}
Response.ContentType:='Content-type: text/xml;charset=utf-8';
Response.Add('');
Response.Add('');
Response.Add(' ' + IntToStr(page) + '');
Response.Add(' ' + IntToStr(TotalPages) + '');
Response.Add(' ' + IntToStr(Count) + '');
for i:= start to Limit + Start do
begin
Response.Add(' ');
Response.Add(' ID' + inttostr(i) + ' | ');
Response.Add(' Debug: ' + 'Limit=' + IntToStr(Limit) + 'Start=' + IntToStr(Start) + ' | ');
Response.Add('
');
end;
Response.Add('');
end;
Bene il risultato completo di quanto appena visto è il seguente
unit main;
{$mode objfpc}{$H+}
interface
uses
Classes, SysUtils, FileUtil, SpiderCGI, SpiderAction, SpiderUtils, Math, jqgrid, htmltemplate;
type
{ TDataModule1 }
TDataModule1 = class(TDataModule)
sa_GetData: TSpiderAction;
SpiderCGI1: TSpiderCGI;
procedure DataModuleCreate(Sender: TObject);
procedure sa_GetDataRequest(Sender: TObject; Request: TSpiderRequest;
var Response: TSpiderResponse);
procedure SpiderCGI1Request(Sender: TObject; Request: TSpiderRequest;
var Response: TSpiderResponse);
private
{ private declarations }
public
{ public declarations }
end;
var
DataModule1: TDataModule1;
implementation
{$R *.lfm}
{ TDataModule1 }
procedure TDataModule1.DataModuleCreate(Sender: TObject);
begin
SpiderCGI1.Execute;
end;
procedure TDataModule1.sa_GetDataRequest(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
Var
i: integer;
Start, Page, Limit, Count, TotalPages: integer;
begin
Count:= 10001;
if Request.Query('rows') <> '' then
Limit:= StrToInt(Request.Query('rows'))
else
Limit:= 0;
if Request.Query('page') <> '' then
Page:= StrToInt(Request.Query('page'))
else
Page:= 1;
if (Count > 0) and (Limit > 0) then
TotalPages:= ceil(Count/Limit)
else
TotalPages:= 0;
if (Page > TotalPages) then
Page:= TotalPages;
Start:= Limit * Page - Limit;
if Start < 0 Then Start:= 0;
Response.ContentType:='Content-type: text/xml;charset=utf-8';
Response.Add('');
Response.Add('');
Response.Add(' ' + IntToStr(page) + '');
Response.Add(' ' + IntToStr(TotalPages) + '');
Response.Add(' ' + IntToStr(Count) + '');
for i:= start to Limit + Start do
begin
Response.Add(' ');
Response.Add(' ID' + inttostr(i) + ' | ');
Response.Add(' Debug: ' + 'Limit=' + IntToStr(Limit) + 'Start=' + IntToStr(Start) + ' | ');
Response.Add('
');
end;
Response.Add('');
end;
procedure TDataModule1.SpiderCGI1Request(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
var
JQGrid: TJQGrid;
Template: THtmlTemplate;
begin
Template:= THtmlTemplate.Create('jqdata/template.html');
Template.Tags.Add('', '/js/');
Template.Tags.Add('', '/jquerydata/');
Template.Load;
JQGrid:= TJQGrid.Create;
JQGrid.Width:= 500;
JQGrid.Rows:= 20;
JQGrid.HtmlTableID:= 'list';
JQGrid.Url:= '/cgi-bin/JGrid/GetData';
With JQGrid.AddColumn Do
begin
Title:= 'Column 1';
Name:= 'Col1';
IsSortable:= true;
end;
With JQGrid.AddColumn Do
begin
Title:= 'Column 2';
Name:= 'Col2';
IsSortable:= false;
end;
Template.AddExtraJavaScript(JQGrid.Content);
response.Add(Template.Content);
Template.Free;
JQGrid.Free;
end;
end.
E' possibile scaricare l'esempio appena visto al seguente indirizzo: http://www.lazaruspascal.it/esempi/JGrid_Semplice.zip
Nell'esempio da scaricare è presente la directory data, che contiene 3 cartelle:
jqdata: copiare questo sotto la directory cgi-bin, contiene il modello e un file di prova
jquerydata: tutti gli elementi grafici e CSS, copiarlo sotto la directory /var /www (per linux) o in C:\Inetpub\wwwroot (per windows)
js: tutto il javascript necessario per lavorare, copiarlo sotto la directory /var/www (per linux) o in C:\Inetpub\wwwroot (per windows)
Compilare il progetto e copiare l'eseguibile jqgrid compilato sotto la cgi-bin.
Avviare il browser preferito e andare a http://localhost/cgi-bin/jqgrid (nel caso si trattasse di windows includere anche l'estensione del file, ovvero .exe)
Ipotizziamo però di voler visualizzare dei dati contenuti in un dataset virtuale (ovvero il risultato di una query), per fare ciò necessitiamo di modificare il codice come segue
unit main;
{$mode objfpc}{$H+}
interface
uses
Classes, SysUtils, FileUtil, SpiderCGI, SpiderAction, SpiderUtils,
SpiderTable, Math, jqgrid, htmltemplate, BufDataset, db;
type
{ TDataModule1 }
TDataModule1 = class(TDataModule)
SpiderTable1: TSpiderTable;
VDSet: TBufDataset;
sa_GetData: TSpiderAction;
SpiderCGI1: TSpiderCGI;
procedure DataModuleCreate(Sender: TObject);
procedure sa_GetDataRequest(Sender: TObject; Request: TSpiderRequest;
var Response: TSpiderResponse);
procedure SpiderCGI1Request(Sender: TObject; Request: TSpiderRequest;
var Response: TSpiderResponse);
private
{ private declarations }
public
{ public declarations }
end;
var
DataModule1: TDataModule1;
implementation
{$R *.lfm}
{ TDataModule1 }
procedure TDataModule1.DataModuleCreate(Sender: TObject);
begin
SpiderCGI1.Execute;
end;
procedure TDataModule1.sa_GetDataRequest(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
Var
i: integer;
Start, Page, Limit, Count, TotalPages: integer;
MieRigheDataSet: integer;
begin
MieRigheDataSet:=500;
{creo un dataset virtuale}
{---------------------------------------------------------------}
{dichiaro la struttura del dataset virtuale}
VDSet.FieldDefs.Add('Nome',ftString,50);
VDSet.FieldDefs.Add('Cognome',ftString,50);
VDSet.CreateDataset;{creo il dataset virtuale con la struttura sopra dichiarata}
VDSet.Open; {apro la connessione al dataset virtuale}
for i:=0 to MieRigheDataSet do
begin
VDSet.Append; {dico che voglio accodare dei dati al dataset virtuale}
VDSet.Fields[0].Value:='Carlo_' + IntToStr(i); {inserisco il campo Nome}
VDSet.Fields[1].Value:='Verdi_' + IntToStr(i); {inserisco il campo Cognome}
VDSet.Post; {applico l'accodamento}
end;
{---------------------------------------------------------------}
Count:= VDSet.RecordCount;
//Count:= 10001;
if Request.Query('rows') <> '' then
Limit:= StrToInt(Request.Query('rows'))
else
Limit:= 0;
if Request.Query('page') <> '' then
Page:= StrToInt(Request.Query('page'))
else
Page:= 1;
if (Count > 0) and (Limit > 0) then
TotalPages:= ceil(Count/Limit)
else
TotalPages:= 0;
if (Page > TotalPages) then
Page:= TotalPages;
Start:= Limit * Page - Limit;
if Start < 0 Then Start:= 0;
Response.ContentType:='Content-type: text/xml;charset=utf-8';
Response.Add('');
Response.Add('');
Response.Add(' ' + IntToStr(page) + '');
Response.Add(' ' + IntToStr(TotalPages) + '');
Response.Add(' ' + IntToStr(Count) + '');
for i:= start to Limit + Start do
begin
if i>=VDSet.RecordCount then
begin
//non faccio nulla perchè la riga non esiste
end
else
begin
VDSet.First;
VDSet.MoveBy(i);
Response.Add(' ');
Response.Add(' ID' + VDSet.FieldByName('Nome').AsString + ' | ');
Response.Add(' Debug: ' + VDSet.FieldByName('Cognome').AsString + ' | ');
Response.Add('
');
end;
end;
Response.Add('');
end;
procedure TDataModule1.SpiderCGI1Request(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
var
JQGrid: TJQGrid;
Template: THtmlTemplate;
begin
Template:= THtmlTemplate.Create('jqdata/template.html');
Template.Tags.Add('', '/js/');
Template.Tags.Add('', '/jquerydata/');
Template.Load;
JQGrid:= TJQGrid.Create;
JQGrid.Width:= 1000;
JQGrid.Rows:= 20;
JQGrid.HtmlTableID:= 'list';
JQGrid.Url:= '/cgi-bin/JGrid/GetData';
With JQGrid.AddColumn Do
begin
Title:= 'Nome';
Name:= 'Col1';
IsSortable:= true;
end;
With JQGrid.AddColumn Do
begin
Title:= 'Cognome';
Name:= 'Col2';
IsSortable:= false;
end;
Template.AddExtraJavaScript(JQGrid.Content);
response.Add(Template.Content);
Template.Free;
JQGrid.Free;
end;
end.
Particolare attenzione va posta per analizzare l'evento OnRequest dell'oggetto sa_GetData
procedure TDataModule1.sa_GetDataRequest(Sender: TObject;
Request: TSpiderRequest; var Response: TSpiderResponse);
Var
i: integer;
Start, Page, Limit, Count, TotalPages: integer;
MieRigheDataSet: integer;
begin
MieRigheDataSet:=500;
{creo un dataset virtuale}
{---------------------------------------------------------------}
{dichiaro la struttura del dataset virtuale}
VDSet.FieldDefs.Add('Nome',ftString,50);
VDSet.FieldDefs.Add('Cognome',ftString,50);
VDSet.CreateDataset;{creo il dataset virtuale con la struttura sopra dichiarata}
VDSet.Open; {apro la connessione al dataset virtuale}
for i:=0 to MieRigheDataSet do
begin
VDSet.Append; {dico che voglio accodare dei dati al dataset virtuale}
VDSet.Fields[0].Value:='Carlo_' + IntToStr(i); {inserisco il campo Nome}
VDSet.Fields[1].Value:='Verdi_' + IntToStr(i); {inserisco il campo Cognome}
VDSet.Post; {applico l'accodamento}
end;
{---------------------------------------------------------------}
Count:= VDSet.RecordCount;
//Count:= 10001;
if Request.Query('rows') <> '' then
Limit:= StrToInt(Request.Query('rows'))
else
Limit:= 0;
if Request.Query('page') <> '' then
Page:= StrToInt(Request.Query('page'))
else
Page:= 1;
if (Count > 0) and (Limit > 0) then
TotalPages:= ceil(Count/Limit)
else
TotalPages:= 0;
if (Page > TotalPages) then
Page:= TotalPages;
Start:= Limit * Page - Limit;
if Start < 0 Then Start:= 0;
Response.ContentType:='Content-type: text/xml;charset=utf-8';
Response.Add('');
Response.Add('');
Response.Add(' ' + IntToStr(page) + '');
Response.Add(' ' + IntToStr(TotalPages) + '');
Response.Add(' ' + IntToStr(Count) + '');
for i:= start to Limit + Start do
begin
if i>=VDSet.RecordCount then
begin
//non faccio nulla perchè la riga non esiste
end
else
begin
VDSet.First;
VDSet.MoveBy(i);
Response.Add(' ');
Response.Add(' ID' + VDSet.FieldByName('Nome').AsString + ' | ');
Response.Add(' Debug: ' + VDSet.FieldByName('Cognome').AsString + ' | ');
Response.Add('
');
end;
end;
Response.Add('');
end;
Dove riveste ruolo fondamentale il seguente codice, perchè crea un dataset virtuale (che potrebbe essere comodamente sostituito da una query, e poi vado a valorizzare la variabile count con il numero di record presente nel dataset
{---------------------------------------------------------------}
{dichiaro la struttura del dataset virtuale}
VDSet.FieldDefs.Add('Nome',ftString,50);
VDSet.FieldDefs.Add('Cognome',ftString,50);
VDSet.CreateDataset;{creo il dataset virtuale con la struttura sopra dichiarata}
VDSet.Open; {apro la connessione al dataset virtuale}
for i:=0 to MieRigheDataSet do
begin
VDSet.Append; {dico che voglio accodare dei dati al dataset virtuale}
VDSet.Fields[0].Value:='Carlo_' + IntToStr(i); {inserisco il campo Nome}
VDSet.Fields[1].Value:='Verdi_' + IntToStr(i); {inserisco il campo Cognome}
VDSet.Post; {applico l'accodamento}
end;
{---------------------------------------------------------------}
Count:= VDSet.RecordCount;
Altra parte di codice importante è
for i:= start to Limit + Start do
begin
if i>=VDSet.RecordCount then
begin
//non faccio nulla perchè la riga non esiste
end
else
begin
VDSet.First; //prima mi porto ad inizio recordset altrimenti il MoveBy non funziona
VDSet.MoveBy(i); //mi sposto sulla riga che voglio visualizzare
Response.Add(' ');
Response.Add(' ID' + VDSet.FieldByName('Nome').AsString + ' | ');
Response.Add(' Debug: ' + VDSet.FieldByName('Cognome').AsString + ' | ');
Response.Add('
');
end;
end;
dove vado a inserire le righe da visualizzare.
Bene da quanto visto si può capire che implementare la JQGrid all'interno di un applicazione CGI è abbastanza semplice.
E' possibile scaricare l'esempio appena visto al seguente indirizzo: http://www.lazaruspascal.it/esempi/JGrid_Dataset.zip
Nell'esempio da scaricare è presente la directory data, che contiene 3 cartelle:
jqdata: copiare questo sotto la directory cgi-bin, contiene il modello e un file di prova
jquerydata: tutti gli elementi grafici e CSS, copiarlo sotto la directory /var /www (per linux) o in C:\Inetpub\wwwroot (per windows)
js: tutto il javascript necessario per lavorare, copiarlo sotto la directory /var/www (per linux) o in C:\Inetpub\wwwroot (per windows)
Compilare il progetto e copiare l'eseguibile jqgrid compilato sotto la cgi-bin.
Avviare il browser preferito e andare a http://localhost/cgi-bin/jqgrid (nel caso si trattasse di windows includere anche l'estensione del file, ovvero .exe)