* * * *
18 Visitatori, 0 Utenti

06 Mar 2012 - 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"

Codice: [Seleziona]

    sa_GetData: TSpiderAction;
    SpiderCGI1: TSpiderCGI;  


Bene nell'evento OnRequest dell'oggetto SpiderCGI1 inseriamo il seguente codice

Codice: [Seleziona]

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

Codice: [Seleziona]

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

Codice: [Seleziona]

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

Codice: [Seleziona]

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

Codice: [Seleziona]

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

Codice: [Seleziona]

     {---------------------------------------------------------------}
     {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 è

Codice: [Seleziona]

     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)

Share on Twitter! Digg this story! Del.icio.us Share on Facebook! Technorati Reddit StumbleUpon

Articles in « WEB »

Comments *

Commenting option has been turned off for this article.

Recenti

How To

Trascinare un file nel programma da xinyiman
DB concetti fondamentali e ZeosLib da xinyiman
Recuperare codice HTML da pagina web da xinyiman
Mandare mail con Lazarus da xinyiman
Stabilire il sistema operativo da xinyiman
Esempio lista in pascal da xinyiman
File INI da xinyiman
Codice di attivazione da xinyiman
Realizzare programmi multilingua da xinyiman
Lavorare con le directory da xinyiman
Utilizzare Unità esterne da Loryea
TTreeView da xinyiman
TTreeview e Menu da xinyiman
Generare controlli RUN-TIME da xinyiman
LazReport, PDF ed immagini da xinyiman
Intercettare tasti premuti da xinyiman
Ampliare Lazarus da xinyiman
Lazarus e la crittografia da xinyiman
System Tray con Lazarus da xinyiman
UIB: Unified Interbase da Microges2000
Il file: questo sconosciuto da Microges2000
Conferma di chiusura di un applicazione da xinyiman
Liste e puntatori da Microges2000
Overload di funzioni da Microges2000
Funzioni a parametri variabili da Microges2000
Proprietà da Microges2000
Conversione numerica da Microges2000
TImage su Form e Panel da Maverich
Indy gestiore server FTP lato Client da Maverich
PopUpMenu sotto Pulsante (TSpeedButton) da Maverich
Direttiva $macro da Microges2000
Toolbar da xinyiman
Evidenziare voci TreeView da Maverich
Visualizzare un file Html esterno da Maverich
StatusBar - aggirare l'errore variabile duplicata da Maverich
Da DataSource a Excel da xinyiman
Le permutazioni da xinyiman
Brute force da xinyiman
Indy 10 - Invio email con allegati da Maverich
La gestione degli errori in Lazarus da xinyiman
Pascal Script da xinyiman
Linux + Zeos + Firebird da xinyiman
Dataset virtuale da xinyiman
Overload di operatori da Microges2000
Lavorare con file in formato JSON con Lazarus da nomorelogic
Zeos ... dietro le quinte (prima parte) da Stilgar
Disporre le finestre in un blocco unico (come Delphi) da Maverich
Aspetto retrò (Cmd Line) da xinyiman
Come interfacciare periferica twain da Narciso
Ubuntu - aggiornare free pascal e lazarus da xinyiman
fpcup: installazioni parallele di lazarus e fpc da nomorelogic
Free Pascal e Lazarus sul Raspberry Pi da nomorelogic
Cifratura: breve guida all'uso dell'algoritmo BlowFish con lazarus e free pascal. da nomorelogic
Creare un server multithread da xinyiman
guida all'installazione di fpc trunk da subversion in linux gentoo da nomorelogic
Indice da nomorelogic
DB concetti fondamentali e connessioni standard da xinyiman
Advanced Record Syntax da nomorelogic
DB concetti fondamentali e DBGrid da xinyiman
DB concetti fondamentali e TDBEdit, TDBMemo e TDBText da xinyiman
Advanced Record Syntax: un esempio pratico da nomorelogic
Superclasse form base per programmi gestionali (e non) da nomorelogic
Superclasse form base per programmi gestionali (e non) #2 - log, exception call stack, application toolbox da nomorelogic
Superclasse form base per programmi gestionali (e non) #3 - traduzione delle form da nomorelogic
Superclasse form base per programmi gestionali (e non) #4 - wait animation da nomorelogic
Un dialog per la connessione al database:TfmSimpleDbConnectionDialog da nomorelogic
Installare lazarus su mac osx sierra da xinyiman
Utenti
  • Utenti in totale: 551
  • Latest: dax
Stats
  • Post in totale: 10687
  • Topic in totale: 1355
  • Online Today: 22
  • Online Ever: 74
  • (Luglio 09, 2012, 11:05:53 am)
Utenti Online
Users: 0
Guests: 18
Total: 18

Disclaimer:

Questo blog non rappresenta una testata giornalistica poiché viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62/2001.