Grid

TsgcHTMLComponent_Grid — ein funktionsreiches HTML-Datengrid mit Sortierung, Filterung, CSV-/PDF-Export, Inline-Bearbeitung, Gruppierung, virtuellem Scrollen und KI-Abfrage, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Grid

Definieren Sie Columns, fügen Sie Zeilen hinzu (oder binden Sie ein Dataset), schalten Sie die gewünschten interaktiven Funktionen ein und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Grid

Rendert

Bootstrap-5-<table> + interaktives Skript

Familie

Daten & Tabellen

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Spalten definieren, Zeilen hinzufügen, rendern

Fügen Sie einen Columns.Add-Eintrag pro Feld hinzu, fügen Sie Zeilen mit AddRow hinzu, aktivieren Sie ShowSort/ShowFilter/ShowExport und lesen Sie dann HTML.

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.TableID := 'orders';
    oGrid.Striped := True;
    oGrid.Hover := True;
    oGrid.ShowSort := True;
    oGrid.ShowFilter := True;
    oGrid.ShowExport := True;

    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Country';
    oGrid.Columns.Add.Title := 'Total';

    oGrid.AddRow(['Alfreds', 'Germany', '1,200']);
    oGrid.AddRow(['Around the Horn', 'UK', '1,900']);

    WebModule.Response := oGrid.HTML;   // Bootstrap table + script
  finally
    oGrid.Free;
  end;
end;

// Or bind it straight to a dataset:
oGrid.LoadFromDataSet(qryOrders);

// includes: sgcHTML_Component_Grid.hpp

TsgcHTMLComponent_Grid *oGrid = new TsgcHTMLComponent_Grid(NULL);
try
{
  oGrid->TableID = "orders";
  oGrid->Striped = true;
  oGrid->Hover = true;
  oGrid->ShowSort = true;
  oGrid->ShowFilter = true;
  oGrid->ShowExport = true;

  oGrid->Columns->Add()->Title = "Customer";
  oGrid->Columns->Add()->Title = "Country";
  oGrid->Columns->Add()->Title = "Total";

  oGrid->AddRow(OPENARRAY(String, ("Alfreds", "Germany", "1,200")));
  oGrid->AddRow(OPENARRAY(String, ("Around the Horn", "UK", "1,900")));

  String html = oGrid->HTML;   // Bootstrap table + script
}
__finally
{
  delete oGrid;
}

using esegece.sgcWebSockets;

var grid = new TsgcHTMLComponent_Grid();
grid.TableID = "orders";
grid.Striped = true;
grid.Hover = true;
grid.ShowSort = true;
grid.ShowFilter = true;
grid.ShowExport = true;

grid.Columns.Add().Title = "Customer";
grid.Columns.Add().Title = "Country";
grid.Columns.Add().Title = "Total";

grid.AddRow(new string[] { "Alfreds", "Germany", "1,200" });
grid.AddRow(new string[] { "Around the Horn", "UK", "1,900" });

string html = grid.HTML;   // Bootstrap table + script

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Spalten & Zeilen

Columns (jedes Element hat Title, Name, Width, Align); AddRow(values) hängt eine Zeile an; Rows stellt die tabulatorgetrennte Hintergrundliste bereit; Clear leert sie.

Dataset-Bindung

LoadFromDataSet hat drei Überladungen — alle Felder, eine benannte Feldliste oder eine Höchstzeilen-Begrenzung — und DataSource steuert eine Live-Aktualisierung.

Styling

Striped, Bordered, Hover, Responsive, Dark und CSSClass werden auf Bootstrap-Tabellenklassen abgebildet.

Interaktivität

ShowSort, ShowFilter, ShowExport (CSV + PDF), InlineEdit mit EditMode und ColumnReorder fügen clientseitiges Verhalten hinzu.

Gruppierung & Scrollen

ShowGrouping + GroupByColumn rendern Gruppenkopfzeilen; VirtualScroll mit VisibleRows und VirtualScrollURL lädt weitere Zeilen beim Einblenden nach.

KI-Abfrage

AIQueryEnabled fügt eine Frageleiste hinzu (AIQueryPlaceholder, AIQueryButtonText, AIQueryButtonStyle); ProcessAIQuery löst das Ereignis OnAIQuery aus.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen