Spreadsheet
TsgcHTMLComponent_Spreadsheet: Delphi、C++ Builder、.NET の Web アプリケーション向けの数式対応グリッド。ユーザーは Excel と同じように値や数式を入力し、サーバーが計算し、すべての変更は保持される前にコードへ届きます。
TsgcHTMLComponent_Spreadsheet: Delphi、C++ Builder、.NET の Web アプリケーション向けの数式対応グリッド。ユーザーは Excel と同じように値や数式を入力し、サーバーが計算し、すべての変更は保持される前にコードへ届きます。
フォームに配置し、コードでシートを埋めて、レンダリングします。すべての編集はサーバーに送られ、サーバーが検証し、依存するセルを再計算して、変更されたセルを返します。ブラウザーには数式エンジンがないため、Delphi と .NET は同じ値を計算します。
TsgcHTMLComponent_Spreadsheet。シートモデル TsgcHTMLSpreadsheetSheet は Sheet プロパティにあります
ツールバー、数式バー、ステータスバーを備えた仮想化グリッド。外部ライブラリなしの純粋な JavaScript と CSS で実装
Delphi、C++ Builder、.NET
SetCellByName でコードからセルを設定します。OnCellChange はユーザーが変更したすべてのセルを検証して保存し、LiveSync を使うと、変更後にホストが GetLiveSyncFragmentHTML をブロードキャストして、開いているすべてのページが変更されたセルを再読み込みします。
uses
sgcHTML_Formula, sgcHTML_Component_Spreadsheet, sgcHTMX_Engine_Server;
// フォーム上: TsgcHTMLComponent_Spreadsheet (Spreadsheet1)。設定は
// LiveSync = True、およびページの TsgcHTMX_Engine_Server (HTMXEngine1)
procedure TMainModule.DataModuleCreate(Sender: TObject);
begin
Spreadsheet1.Sheet.SetCellByName('A1', 'Item');
Spreadsheet1.Sheet.SetCellByName('B1', 'Amount');
Spreadsheet1.Sheet.SetCellByName('A2', 'Rent');
Spreadsheet1.Sheet.SetCellByName('B2', '1200');
Spreadsheet1.Sheet.SetCellByName('A3', 'Travel');
Spreadsheet1.Sheet.SetCellByName('B3', '340.50');
Spreadsheet1.Sheet.SetCellByName('A4', 'Total');
Spreadsheet1.Sheet.SetCellByName('B4', '=SUM(B2:B3)');
end;
// ユーザーが変更するすべてのセル: 入力、貼り付け、フィル、クリア
procedure TMainModule.Spreadsheet1CellChange(Sender: TObject; aRow, aCol: Integer;
const aOldRaw: string; var aNewRaw: string; var aAccept: Boolean);
begin
if aRow = 0 then
aAccept := False // タイトル行はそのまま残します
else
StoreCell(sgcHTMLCellName(aRow, aCol), aNewRaw); // 独自のストア: テーブルやファイル
end;
// 変更は適用され再計算されました: 開いているすべてのページに通知します
procedure TMainModule.Spreadsheet1Change(Sender: TObject;
aSheet: TsgcHTMLSpreadsheetSheet);
begin
HTMXEngine1.BroadcastFragment(Spreadsheet1.GetLiveSyncFragmentHTML);
end;
// GET /budget.xlsx: 数式とスタイルを含むブックとしてのシート
procedure TMainModule.ExportBudget(aStream: TStream);
begin
Spreadsheet1.SaveToXLSX(aStream);
end;
@* Views/Sheets/Budget.cshtml: チームで共有する予算 *@
@model BudgetModel
<sgc-spreadsheet name="budget" rows="40" cols="14"
frozen-rows="1" frozen-cols="1" css-height="560px"
allow-insert-delete="false" live-sync="true"
on-get-sheet="Model.GetSheet"
on-cell-change="Model.CellChange"
on-change="Model.Changed" />
using esegece.sgcWebSockets;
var budget = new TsgcHTMLComponent_Spreadsheet();
budget.LiveSync = true;
budget.Sheet.SetCellByName("A1", "Item");
budget.Sheet.SetCellByName("B1", "Amount");
budget.Sheet.SetCellByName("A2", "Rent");
budget.Sheet.SetCellByName("B2", "1200");
budget.Sheet.SetCellByName("B3", "340.50");
budget.Sheet.SetCellByName("A4", "Total");
budget.Sheet.SetCellByName("B4", "=SUM(B2:B3)");
budget.OnCellChange += CellChange;
budget.OnChange += Changed;
// OnCellChange: 1 つのセルを検証して保持します
public void CellChange(object Sender, int aRow, int aCol, string aOldRaw,
ref string aNewRaw, ref bool aAccept)
{
if (aRow == 0)
aAccept = false;
else
store.Save(aRow, aCol, aNewRaw);
}
// OnChange: 適用され再計算されると、開いているすべてのページが変更されたセルを再読み込みします
public void Changed(object Sender, TsgcHTMLSpreadsheetSheet aSheet)
{
_ = hub.BroadcastAsync(((TsgcHTMLComponent_Spreadsheet)Sender).GetLiveSyncFragmentHTML());
}
// OnGetSheet: ユーザーごとに 1 つのシート
public void GetSheet(object Sender, ref TsgcHTMLSpreadsheetSheet? aSheet)
{
aSheet = sheets.ForUser(User.Identity.Name);
}
// GET /budget.xlsx
using var ms = new MemoryStream();
budget.SaveToXLSX(ms);
Excel でおなじみのキーボード、クリップボード、数式を、サーバーが保持する 1 つのシートで。
= で始まるセルは数式です。演算子 + - * / ^ % &、比較、かっこ、セル参照、A1:C5 のような範囲に対応し、絶対参照の部分は $A$1、A$1、$A1 のように記述します。優先順位と文字列から数値への変換は Excel と同じように動作します。エラーは #DIV/0!、#VALUE!、#REF!、#NAME?、#NUM!、#N/A として表示され、#CIRC! は循環参照にあるセルを示します。
数学と統計: SUM、AVERAGE、MIN、MAX、COUNT、COUNTA、COUNTBLANK、PRODUCT、ROUND、ROUNDUP、ROUNDDOWN、INT、MOD、ABS、SQRT、POWER、PI。論理と情報: IF、IFERROR、AND、OR、NOT、TRUE、FALSE、ISBLANK、ISNUMBER、ISTEXT、ISERROR。文字列: CONCAT、CONCATENATE、LEN、LEFT、RIGHT、MID、UPPER、LOWER、TRIM、VALUE。
条件付き: SUMIF、COUNTIF、AVERAGEIF。条件には ">10"、"<>x" やワイルドカード *、? が使えます。検索: VLOOKUP と HLOOKUP (完全一致または近似一致)、INDEX と MATCH。日付: DATE、YEAR、MONTH、DAY、TODAY。Excel のシリアル値を使用します。財務: PMT、FV、PV、NPV。合計 54 個の関数が Excel と同じ動作で用意され、数式バーが関数名を補完します。
太字、斜体、配置、文字色、塗りつぶしの色に加え、セルごとの表示形式として、標準、数値、通貨、パーセント、日付、文字列を選べます。小数点以下は 0 から 10 桁、桁区切り、通貨記号、日付形式に対応します。表示では、sgcHTML のロケールが定義している場合、そのロケールの小数点と桁区切りの記号を使用します。
矢印キー、Tab と Shift+Tab、Enter と Shift+Enter、Home、End、Ctrl+Home、Ctrl+End、Ctrl+矢印キー、PageUp と PageDown。F2 または文字入力で編集を開始し、Esc で取り消し、Delete でクリアします。Shift+矢印キー、Shift+クリック、マウスのドラッグで範囲を選択し、見出しのクリックで行または列を選択し、Ctrl+D と Ctrl+R で下方向と右方向にコピーし、Ctrl+Z と Ctrl+Y でユーザー自身の編集を元に戻したりやり直したりできます。
数式バーにはセルの生の内容が表示され、名前ボックスからセルへジャンプできます。B12 と入力して Enter キーを押してください。数式の編集中は参照が色で強調表示され、ユーザーはセルをクリックしたり範囲をドラッグしたりして数式に入力できます。
コピー、切り取り、貼り付けには、Excel と Google スプレッドシートがクリップボードに置くタブ区切りテキストを使うため、セルのブロックを両者の間で双方向に移動できます。シート内でコピーして別の場所に貼り付けたりフィルしたりした数式は、相対参照がずれ、絶対参照は維持されます。
ツールバー、またはセルや見出しのコンテキストメニューから、行を上または下に、列を左または右に挿入し、行や列を削除できます。すべての数式のすべての参照が Excel と同じように調整され、削除されたセルへの参照は #REF! になります。列は見出しの境界をドラッグしてサイズ変更でき、行と列は固定できます。
Excel にエクスポートすると、数式とその値、セルのスタイルと表示形式、列幅、固定したウィンドウを含む .xlsx をダウンロードします。インポートでは、現在のシートを置き換えることをユーザーが確認した後、数式とスタイルを含む .xlsx、または .csv を読み込みます。
LiveSync を使うと、同じシートを開いている人同士が互いの変更を見られます。別のユーザーが変更したセルは再読み込みされて点滅します。受け入れられた変更ごとにシートのリビジョンが進み、リビジョンを取りこぼしたページはシート全体を再読み込みします。
ステータスバーには選択範囲の合計、平均、個数が表示され、インジケーターが変更が保存されたかどうかを示します。ページには表示されている行と列だけが含まれるため、10,000 行 × 104 列のシートでもスムーズにスクロールできます。JavaScript がなくても、ページにはクローラーが読めるセルのプレーンなテーブルが含まれます。
シートは WAI-ARIA グリッドで、行数と列数およびインデックスを持ち、丁寧なライブリージョンがセル参照とその値を読み上げます。ページのテーマに従い、dir="rtl" では左右反転し、モーション低減の設定を尊重し、スマートフォンの幅でも動作します。タッチスクロール、タップで選択、ダブルタップで編集に対応します。
最もよく使うメンバーです。
Sheet は TsgcHTMLSpreadsheetSheet です。SetCell(aRow, aCol, aRaw) と SetCellByName('B2', '=A1*2') でセルを設定し、Raw、Value、Text、Style で読み取ります。= で始まる raw は数式で、先頭のアポストロフィは文字列として扱います。API では行と列は 0 から始まるため、A1 は行 0、列 0 です。Lock と Unlock は、独自のスレッドから行う変更を保護します。
OnCellChange(Sender, aRow, aCol, aOldRaw, aNewRaw, aAccept) は、ユーザーが変更したセルごとに実行されます。aNewRaw を変更して値を修正するか、aAccept を False に設定して拒否するか、そのまま保存します。OnChange(Sender, aSheet) は、変更が適用されて再計算された後に続きます。GetLiveSyncFragmentHTML をブロードキャストする場所です。
OnGetSheet(Sender, aSheet) は、リクエストを送ったユーザーのシートを返します。レンダリング時とすべてのリクエストで呼び出されるため、1 つのコンポーネントがすべてのユーザーに、それぞれ専用のシートを提供します。
ブラウザーはユーザーが入力した内容を送り、残りはサーバーが行います。変更を適用し、依存関係グラフを使って依存するセルを再計算し、変更されたセルだけを返します。Recalculate は全体の再計算を実行し、Evaluate はセルの外で数式を計算します。Delphi と .NET は、同じ結果、同じ JSON、同じ XLSX のバイト列を生成します。
サーバーはブラウザーを決して信頼しません。ReadOnly、スイッチ AllowFormulas、AllowFormatting、AllowInsertDelete、AllowImport、AllowExport、座標を MaxRows (10000) と MaxCols (104) に対して、さらに MaxCells (100000)、MaxCellLength (8192)、MaxImportSize (5 MB) を確認し、その後セルごとに OnCellChange を呼び出します。OnImport はファイルを拒否できます。
RowCount (100) と ColCount (26) がシートのサイズを決め、FrozenRows と FrozenCols がタイトルを固定し、DefaultColWidth、RowHeight、CSSHeight が各サイズを設定し、ShowToolbar、ShowFormulaBar、ShowStatusBar が各バーの表示と非表示を切り替えます。ExportFileName はダウンロードするブックの名前を指定します。
SaveToXLSX と LoadFromXLSX は、数式とスタイルを含むブックをコードから書き込み、読み込みます。シートでは、SaveToJSON と LoadFromJSON が Delphi と .NET でバイト単位まで同じに書き出される 1 つの JSON 形式で保持し、SaveToCSV と LoadFromCSV は生の値を使って RFC 4180 に従い、LoadFromDataSet はヘッダー行とレコードを読み込みます。
InsertRows、DeleteRows、InsertCols、DeleteCols(aIndex, aCount) は、すべての参照を Excel と同じように調整します。ShiftFormula(aFormula, aDeltaRow, aDeltaCol) は数式の相対参照を移動し、絶対参照は維持します。これはブラウザーが貼り付けとフィルで適用するのと同じルールです。
シートは、HTMX エンジンのコンポーネントイベントのエンドポイント、または ActionURL に送信します。どちらもない場合は、シートの読み取り専用ビューアーになります。
Razor ビューでは、<sgc-spreadsheet> Tag Helper がシートをレンダリングし、そのリクエストには UseSgcHtml の sgcHTML ミドルウェアが応答します。属性は name、read-only、rows、cols、frozen-rows、frozen-cols、css-height、スイッチ allow-*、live-sync、action-url、およびハンドラー on-get-sheet、on-cell-change、on-change です。
Demos\60.HTML\01.RunTime\35.Spreadsheet は sgc Sheets で、ポート 8137 で動作するサーバーに 3 つのシートがあります。全員がライブで編集するチーム予算 (SUM の合計、構成比、通貨形式、変更のたびに更新されるグラフ付き)、訪問者ごとにシートを持つローン計算 (PMT、下方向にフィルした償還表、残高グラフ付き)、そして地域別売上 (SUMIF と VLOOKUP、XLSX のエクスポートとインポート付き) です。デザイン時、Lazarus、.NET 版も同じ内容です。
| オンラインで試すeSeGeCe デモサーバーでライブ動作する スプレッドシート デモをご覧ください。 | 開く | |
| オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。 | 開く | |
| Grid コンポーネントデータセット向けのデータグリッド: 並べ替え、フィルター、グループ化、インライン編集、エクスポート。 | 開く | |
| すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。 | 開く | |
| 無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。 | 開く | |
| 価格完全なソースコード付きの Single、Team、Site ライセンス。 | 開く |