TreeGrid 组件 — sgcHTML

概览

TsgcHTMLComponent_TreeGrid

定义列，添加节点（或按 Id / ParentId 绑定自引用数据集），然后读取 HTML 属性。

组件类

TsgcHTMLComponent_TreeGrid

渲染为

Bootstrap 5 表格 + 作用域 CSS + 折叠切换脚本

家族

数据与表格

语言

Delphi, C++ Builder, .NET

快速入门

添加列、添加节点，渲染它

为每个可见字段添加一个 TsgcHTMLTreeGridColumn，用 AddNode 推送行，然后读取 HTML。每个节点的 Id / ParentId 构建层级结构。

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

参考

关键属性与方法

您最常使用的成员。

列

Columns 保存可见字段；每一列都有 Caption、FieldName、Width、枚举 Align 和 Visible。

添加行

AddNode(aId, aParentId, aValues) 追加一行；Id / ParentId 定义层级结构，aValues 为每一列保存一个字符串。

数据集绑定

LoadFromDataSet(aDataSet, aIdField, aParentIdField) 遍历自引用记录集并构建为树，当 Columns 为空时会为其余每个字段自动创建一列。

展开/折叠

ExpandedByDefault、节点自身的 Expanded、IndentPixels、ExpandedIcon 和 CollapsedIcon 驱动客户端的可折叠切换。

排序

Sortable 和 SortColumn 按所选列对每个父节点下的同级行进行排序，与区域设置无关。

表格样式

Striped、Bordered、Hover 和 ShowRowLines 设置 Bootstrap 表格的样式；HTML 返回表格及其折叠切换脚本。

资源

继续探索

	在线帮助此组件的完整 API 参考和使用指南。	打开
	所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。	打开
	下载免费试用版30 天试用版附带 60.HTML 演示项目。	打开
	价格Single、Team 和 Site 授权，均含完整源代码。	打开

TreeGrid