En bref

TsgcHTMLComponent_TreeGrid

Définissez les colonnes, ajoutez des nœuds (ou liez un jeu de données auto-référencé par Id / ParentId), puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_TreeGrid

Produit

Un tableau Bootstrap 5 + CSS dédié + script de bascule

Famille

Données & Tableaux

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des colonnes, ajoutez des nœuds, affichez-le

Ajoutez un TsgcHTMLTreeGridColumn par champ visible, ajoutez des lignes avec AddNode, puis lisez HTML. L'Id / ParentId de chaque nœud construit la hiérarchie.

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Colonnes

Columns contient les champs visibles ; chacun a un Caption, un FieldName, une Width, une énumération Align et Visible.

Ajout de lignes

AddNode(aId, aParentId, aValues) ajoute une ligne ; Id / ParentId définissent la hiérarchie, aValues contient une chaîne par colonne.

Liaison de jeu de données

LoadFromDataSet(aDataSet, aIdField, aParentIdField) parcourt un jeu d'enregistrements auto-référencé pour construire l'arbre, en créant automatiquement une colonne par champ restant lorsque Columns est vide.

Développer / replier

ExpandedByDefault, l'Expanded propre à chaque nœud, IndentPixels, ExpandedIcon et CollapsedIcon pilotent la bascule repliable côté client.

Tri

Sortable et SortColumn trient les lignes sœurs au sein de chaque parent, indépendamment de la locale, selon la colonne choisie.

Style du tableau

Striped, Bordered, Hover et ShowRowLines stylisent le tableau Bootstrap ; HTML renvoie le tableau plus son script de bascule.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

TreeGrid