Auf einen Blick

TsgcHTMLComponent_TreeGrid

Definieren Sie die Spalten, fügen Sie Knoten hinzu (oder binden Sie ein selbstreferenzierendes Dataset nach Id/ParentId), und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_TreeGrid

Rendert

Bootstrap-5-Tabelle + scoped CSS + Toggle-Skript

Familie

Daten & Tabellen

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Spalten hinzufügen, Knoten hinzufügen, rendern

Fügen Sie pro sichtbarem Feld eine TsgcHTMLTreeGridColumn hinzu, fügen Sie Zeilen mit AddNode hinzu und lesen Sie dann HTML. Die Id/ParentId jedes Knotens baut die Hierarchie auf.

uses
  sgcHTML_Component_TreeGrid;

var
  oTreeGrid: TsgcHTMLComponent_TreeGrid;
  oColumn: TsgcHTMLTreeGridColumn;
begin
  oTreeGrid := TsgcHTMLComponent_TreeGrid.Create(nil);
  try
    oTreeGrid.TreeGridID := 'orgchart';
    oTreeGrid.Sortable := True;

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Department';
    oColumn.FieldName := 'Name';

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Headcount';
    oColumn.FieldName := 'Headcount';
    oColumn.Align := tgaRight;

    oTreeGrid.AddNode('eng', '', ['Engineering', '42']);
    oTreeGrid.AddNode('eng-be', 'eng', ['Backend', '18']);
    oTreeGrid.AddNode('eng-fe', 'eng', ['Frontend', '15']);

    WebModule.Response := oTreeGrid.HTML;   // hierarchical table + scoped CSS + toggle script
  finally
    oTreeGrid.Free;
  end;
end;

// Or bind it straight to a self-referencing dataset (Id / ParentId columns):
oTreeGrid.LoadFromDataSet(qryDepartments, 'Id', 'ParentId');

// includes: sgcHTML_Component_TreeGrid.hpp

TsgcHTMLComponent_TreeGrid *oTreeGrid = new TsgcHTMLComponent_TreeGrid(NULL);
try
{
  oTreeGrid->TreeGridID = "orgchart";
  oTreeGrid->Sortable = true;

  TsgcHTMLTreeGridColumn *oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Department";
  oColumn->FieldName = "Name";

  oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Headcount";
  oColumn->FieldName = "Headcount";
  oColumn->Align = tgaRight;

  oTreeGrid->AddNode("eng", "", OPENARRAY(UnicodeString, ("Engineering", "42")));
  oTreeGrid->AddNode("eng-be", "eng", OPENARRAY(UnicodeString, ("Backend", "18")));

  String html = oTreeGrid->HTML;   // hierarchical table + scoped CSS + toggle script
}
__finally
{
  delete oTreeGrid;
}

using esegece.sgcWebSockets;

var treeGrid = new TsgcHTMLComponent_TreeGrid();
treeGrid.TreeGridID = "orgchart";
treeGrid.Sortable = true;

var column = treeGrid.Columns.Add();
column.Caption = "Department";
column.FieldName = "Name";

column = treeGrid.Columns.Add();
column.Caption = "Headcount";
column.FieldName = "Headcount";
column.Align = TsgcHTMLTreeGridAlign.tgaRight;

treeGrid.AddNode("eng", "", new[] { "Engineering", "42" });
treeGrid.AddNode("eng-be", "eng", new[] { "Backend", "18" });

string html = treeGrid.HTML;   // hierarchical table + scoped CSS + toggle script

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Spalten

Columns enthält die sichtbaren Felder; jede hat eine Caption, FieldName, Width, Enum-Align und Visible.

Zeilen hinzufügen

AddNode(aId, aParentId, aValues) fügt eine Zeile hinzu; Id/ParentId definieren die Hierarchie, aValues enthält eine Zeichenkette pro Spalte.

Dataset-Bindung

LoadFromDataSet(aDataSet, aIdField, aParentIdField) überführt ein selbstreferenzierendes Recordset in den Baum und erzeugt automatisch eine Spalte pro verbleibendem Feld, wenn Columns leer ist.

Erweitern/Einklappen

ExpandedByDefault, das eigene Expanded eines Knotens, IndentPixels, ExpandedIcon und CollapsedIcon steuern den einklappbaren clientseitigen Umschalter.

Sortierung

Sortable und SortColumn sortieren Geschwisterzeilen innerhalb jedes Elternknotens, gebietsschemaunabhängig, nach der gewählten Spalte.

Tabellengestaltung

Striped, Bordered, Hover und ShowRowLines gestalten die Bootstrap-Tabelle; HTML gibt die Tabelle samt ihres Toggle-Skripts zurück.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 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

TreeGrid