TreeView

TsgcHTMLComponent_TreeView — 从您自己的节点或直接从数据集渲染一棵可折叠的层次树,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_TreeView

一个树组件,发出带有可折叠分支的 Bootstrap list-group。添加节点(每个节点都有子节点),设置图标和缩进,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_TreeView

渲染为

Bootstrap 5 list-group 可折叠树

语言

Delphi, C++ Builder, .NET

创建它、添加节点、渲染它

Nodes 添加一个节点,将子行推入其 Children 列表,调整 IndentSize 和图标,然后读取 HTML(或将其放入 TsgcHTMLTemplate_Bootstrap 页面)。

uses
  sgcHTML_Enums, sgcHTML_Component_TreeView;

var
  oTree: TsgcHTMLComponent_TreeView;
  oNode: TsgcHTMLTreeNode;
begin
  oTree := TsgcHTMLComponent_TreeView.Create(nil);
  try
    oTree.TreeID := 'fileTree';
    oTree.ShowLines := True;
    oTree.Selectable := True;
    oTree.IndentSize := 24;

    oNode := oTree.Nodes.Add;
    oNode.Text := 'Documents';
    oNode.Expanded := True;
    oNode.Children.Add('Invoice.pdf');
    oNode.Children.Add('Report.docx');

    WebModule.Response := oTree.HTML;   // list-group tree
  finally
    oTree.Free;
  end;
end;

// Or build the tree straight from a self-referencing dataset:
oTree.LoadFromDataSet(qryFolders, 'ID', 'ParentID', 'Name');
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_TreeView.hpp

TsgcHTMLComponent_TreeView *oTree = new TsgcHTMLComponent_TreeView(NULL);
try
{
  oTree->TreeID = "fileTree";
  oTree->ShowLines = true;
  oTree->Selectable = true;
  oTree->IndentSize = 24;

  TsgcHTMLTreeNode *oNode = oTree->Nodes->Add();
  oNode->Text = "Documents";
  oNode->Expanded = true;
  oNode->Children->Add("Invoice.pdf");
  oNode->Children->Add("Report.docx");

  String html = oTree->HTML;   // list-group tree
}
__finally
{
  delete oTree;
}
using esegece.sgcWebSockets;

var tree = new TsgcHTMLComponent_TreeView();
tree.TreeID = "fileTree";
tree.ShowLines = true;
tree.Selectable = true;
tree.IndentSize = 24;

var node = tree.Nodes.Add();
node.Text = "Documents";
node.Expanded = true;
node.Children.Add("Invoice.pdf");
node.Children.Add("Report.docx");

string html = tree.HTML;   // list-group tree

// Or build the tree straight from a self-referencing dataset:
tree.LoadFromDataSet(qryFolders, "ID", "ParentID", "Name");

关键属性与方法

您最常使用的成员。

节点

NodesTsgcHTMLTreeNodes 集合;Nodes.Add 返回一个带有 TextHrefIconExpandedSelectedNodeIDTsgcHTMLTreeNode

子节点

每个节点的 Children 是叶行的 TStringList;非空分支会自动渲染一个 Bootstrap 折叠切换。

数据集绑定

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) 分两遍从自引用查询构建整棵树。

外观

ShowLinesLineColor / LineColorStyleIndentSize 控制引导线和嵌套偏移;Selectable 高亮活动行。

图标

ExpandedIconCollapsedIconLeafIcon 为打开的分支、关闭的分支和叶子设置图标(允许 HTML 实体)。

输出

HTML 返回 list-group 树标记,TreeID 设置其元素 id — 直接提供服务,或将其赋给页面模板的 BodyContent

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。