TreeView
TsgcHTMLComponent_TreeView — Delphi、C++ Builder、.NET で、独自のノードから、またはデータセットから直接、折りたたみ可能な階層ツリーをレンダリングします。
TsgcHTMLComponent_TreeView — Delphi、C++ Builder、.NET で、独自のノードから、またはデータセットから直接、折りたたみ可能な階層ツリーをレンダリングします。
折りたたみ可能なブランチを備えた 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");
最もよく使うメンバーです。
Nodes は TsgcHTMLTreeNodes コレクションです。Nodes.Add は、Text、Href、Icon、Expanded、Selected、NodeID を持つ TsgcHTMLTreeNode を返します。
各ノードの Children はリーフ行の TStringList です。空でないブランチは、Bootstrap の折りたたみトグルを自動的にレンダリングします。
LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) は、自己参照クエリから 2 パスでツリー全体を構築します。
ShowLines、LineColor / LineColorStyle、IndentSize がガイド線とネストのオフセットを制御します。Selectable はアクティブな行を強調表示します。
ExpandedIcon、CollapsedIcon、LeafIcon は、開いたブランチ、閉じたブランチ、リーフのグリフを設定します(HTML エンティティが使用可能)。
HTML は list-group ツリーのマークアップを返し、TreeID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。