Grid

TsgcHTMLComponent_Grid — Delphi、C++ Builder、.NET で、ソート、フィルター、CSV/PDF エクスポート、インライン編集、グループ化、仮想スクロール、AI クエリを備えた、機能豊富な HTML データグリッドです。

TsgcHTMLComponent_Grid

Columns を定義し、行をプッシュし(またはデータセットをバインドし)、必要なインタラクティブ機能を切り替えてから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Grid

レンダリング内容

Bootstrap 5 の <table> + インタラクティブスクリプト

ファミリー

データ & テーブル

言語

Delphi, C++ Builder, .NET

列を定義し、行を追加し、レンダリングする

フィールドごとに Columns.Add エントリを追加し、AddRow で行をプッシュし、ShowSort/ShowFilter/ShowExport を有効にしてから、HTML を読み取ります。

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.TableID := 'orders';
    oGrid.Striped := True;
    oGrid.Hover := True;
    oGrid.ShowSort := True;
    oGrid.ShowFilter := True;
    oGrid.ShowExport := True;

    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Country';
    oGrid.Columns.Add.Title := 'Total';

    oGrid.AddRow(['Alfreds', 'Germany', '1,200']);
    oGrid.AddRow(['Around the Horn', 'UK', '1,900']);

    WebModule.Response := oGrid.HTML;   // Bootstrap table + script
  finally
    oGrid.Free;
  end;
end;

// Or bind it straight to a dataset:
oGrid.LoadFromDataSet(qryOrders);
// includes: sgcHTML_Component_Grid.hpp

TsgcHTMLComponent_Grid *oGrid = new TsgcHTMLComponent_Grid(NULL);
try
{
  oGrid->TableID = "orders";
  oGrid->Striped = true;
  oGrid->Hover = true;
  oGrid->ShowSort = true;
  oGrid->ShowFilter = true;
  oGrid->ShowExport = true;

  oGrid->Columns->Add()->Title = "Customer";
  oGrid->Columns->Add()->Title = "Country";
  oGrid->Columns->Add()->Title = "Total";

  oGrid->AddRow(OPENARRAY(String, ("Alfreds", "Germany", "1,200")));
  oGrid->AddRow(OPENARRAY(String, ("Around the Horn", "UK", "1,900")));

  String html = oGrid->HTML;   // Bootstrap table + script
}
__finally
{
  delete oGrid;
}
using esegece.sgcWebSockets;

var grid = new TsgcHTMLComponent_Grid();
grid.TableID = "orders";
grid.Striped = true;
grid.Hover = true;
grid.ShowSort = true;
grid.ShowFilter = true;
grid.ShowExport = true;

grid.Columns.Add().Title = "Customer";
grid.Columns.Add().Title = "Country";
grid.Columns.Add().Title = "Total";

grid.AddRow(new string[] { "Alfreds", "Germany", "1,200" });
grid.AddRow(new string[] { "Around the Horn", "UK", "1,900" });

string html = grid.HTML;   // Bootstrap table + script

主なプロパティとメソッド

最もよく使うメンバーです。

Columns & rows

Columns(各項目は TitleNameWidthAlign を持ちます)。AddRow(values) は行を追加し、Rows はタブ区切りのバッキングリストを公開し、Clear はそれを空にします。

Dataset binding

LoadFromDataSet には 3 つのオーバーロードがあります — 全フィールド、名前付きフィールドのリスト、または最大行数の上限 — そして DataSource はライブの更新を駆動します。

Styling

StripedBorderedHoverResponsiveDarkCSSClass は Bootstrap のテーブルクラスにマッピングされます。

Interactivity

ShowSortShowFilterShowExport(CSV + PDF)、EditMode を伴う InlineEditColumnReorder がクライアント側の動作を追加します。

Grouping & scrolling

ShowGrouping + GroupByColumn はグループヘッダーをレンダリングします。VisibleRowsVirtualScrollURL を伴う VirtualScroll は、表示時にさらに行を読み込みます。

AI query

AIQueryEnabled は質問バー(AIQueryPlaceholderAIQueryButtonTextAIQueryButtonStyle)を追加します。ProcessAIQueryOnAIQuery イベントを発生させます。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。