Componente TreeGrid — sgcHTML

De un vistazo

TsgcHTMLComponent_TreeGrid

Define las columnas, añade nodos (o vincula un dataset autorreferenciado por Id / ParentId), y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_TreeGrid

Genera

Tabla de Bootstrap 5 + CSS encapsulado + script de expansión

Familia

Datos y Tablas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade columnas, añade nodos, renderízalo

Añade una TsgcHTMLTreeGridColumn por cada campo visible, inserta filas con AddNode, y luego lee HTML. El Id / ParentId de cada nodo construye la jerarquía.

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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Columnas

Columns contiene los campos visibles; cada una tiene un Caption, FieldName, Width, el enum Align y Visible.

Añadir filas

AddNode(aId, aParentId, aValues) añade una fila; Id / ParentId definen la jerarquía, aValues contiene una cadena por columna.

Vinculación a dataset

LoadFromDataSet(aDataSet, aIdField, aParentIdField) recorre un recordset autorreferenciado hacia el árbol, creando automáticamente una columna por cada campo restante cuando Columns está vacío.

Expandir / contraer

ExpandedByDefault, la propiedad Expanded de cada nodo, IndentPixels, ExpandedIcon y CollapsedIcon controlan el plegado interactivo en el cliente.

Ordenación

Sortable y SortColumn ordenan las filas hermanas dentro de cada padre, de forma independiente del idioma, según la columna elegida.

Estilo de la tabla

Striped, Bordered, Hover y ShowRowLines dan estilo a la tabla Bootstrap; HTML devuelve la tabla junto con su script de expansión.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

TreeGrid