Spreadsheet

TsgcHTMLComponent_Spreadsheet: ein Raster mit Formeln für Webanwendungen in Delphi, C++ Builder und .NET. Benutzer geben Werte und Formeln ein wie in Excel, der Server berechnet sie, und jede Änderung erreicht Ihren Code, bevor sie gespeichert wird.

TsgcHTMLComponent_Spreadsheet

Legen Sie sie auf ein Formular, füllen Sie ihr Blatt im Code und rendern Sie sie. Jede Bearbeitung geht an den Server, der sie prüft, die davon abhängigen Zellen neu berechnet und die geänderten Zellen zurückgibt. Im Browser gibt es keine Formel-Engine, daher berechnen Delphi und .NET dieselben Werte.

Komponentenklasse

TsgcHTMLComponent_Spreadsheet, mit dem Blattmodell TsgcHTMLSpreadsheetSheet in der Eigenschaft Sheet

Rendert

Ein virtualisiertes Raster mit Symbolleiste, Formelleiste und Statusleiste, in reinem JavaScript und CSS ohne externe Bibliothek

Sprachen

Delphi, C++ Builder, .NET

Das Blatt füllen, Änderungen speichern, live teilen

Setzen Sie Zellen im Code mit SetCellByName. OnCellChange prüft und speichert jede Zelle, die ein Benutzer ändert, und mit LiveSync sendet der Host nach einer Änderung GetLiveSyncFragmentHTML, sodass jede geöffnete Seite die geänderten Zellen neu lädt.

uses
  sgcHTML_Formula, sgcHTML_Component_Spreadsheet, sgcHTMX_Engine_Server;

// Im Formular: ein TsgcHTMLComponent_Spreadsheet (Spreadsheet1) mit
// LiveSync = True und dem TsgcHTMX_Engine_Server (HTMXEngine1) der Seite

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;

// Jede Zelle, die ein Benutzer ändert: Eingabe, Einfügen, Ausfüllen oder Löschen
procedure TMainModule.Spreadsheet1CellChange(Sender: TObject; aRow, aCol: Integer;
  const aOldRaw: string; var aNewRaw: string; var aAccept: Boolean);
begin
  if aRow = 0 then
    aAccept := False   // die Titelzeile bleibt, wie sie ist
  else
    StoreCell(sgcHTMLCellName(aRow, aCol), aNewRaw);   // Ihr eigener Speicher: eine Tabelle, eine Datei
end;

// Die Änderung ist angewendet und neu berechnet: jede geöffnete Seite benachrichtigen
procedure TMainModule.Spreadsheet1Change(Sender: TObject;
  aSheet: TsgcHTMLSpreadsheetSheet);
begin
  HTMXEngine1.BroadcastFragment(Spreadsheet1.GetLiveSyncFragmentHTML);
end;

// GET /budget.xlsx: das Blatt als Arbeitsmappe, mit Formeln und Formaten
procedure TMainModule.ExportBudget(aStream: TStream);
begin
  Spreadsheet1.SaveToXLSX(aStream);
end;
@* Views/Sheets/Budget.cshtml: das gemeinsame Teambudget *@
@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: eine Zelle prüfen und speichern
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: angewendet und neu berechnet, jede geöffnete Seite lädt die geänderten Zellen neu
public void Changed(object Sender, TsgcHTMLSpreadsheetSheet aSheet)
{
    _ = hub.BroadcastAsync(((TsgcHTMLComponent_Spreadsheet)Sender).GetLiveSyncFragmentHTML());
}

// OnGetSheet: ein Blatt pro Benutzer
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);

Was Ihre Benutzer bekommen

Die Tastatur, die Zwischenablage und die Formeln, die sie aus Excel kennen, auf einem Blatt, das Ihr Server verwaltet.

Formeln

Eine Zelle, die mit = beginnt, ist eine Formel: die Operatoren + - * / ^ % &, Vergleiche, Klammern, Zellbezüge und Bereiche wie A1:C5, mit absoluten Teilen als $A$1, A$1 oder $A1. Rangfolge und die Umwandlung von Text in Zahlen funktionieren wie in Excel. Fehler erscheinen als #DIV/0!, #VALUE!, #REF!, #NAME?, #NUM! und #N/A, und #CIRC! markiert eine Zelle in einem Zirkelbezug.

Mathematik-, Logik- und Textfunktionen

Mathematik und Statistik: SUM, AVERAGE, MIN, MAX, COUNT, COUNTA, COUNTBLANK, PRODUCT, ROUND, ROUNDUP, ROUNDDOWN, INT, MOD, ABS, SQRT, POWER, PI. Logik und Information: IF, IFERROR, AND, OR, NOT, TRUE, FALSE, ISBLANK, ISNUMBER, ISTEXT, ISERROR. Text: CONCAT, CONCATENATE, LEN, LEFT, RIGHT, MID, UPPER, LOWER, TRIM, VALUE.

Nachschlage-, Datums- und Finanzfunktionen

Bedingt: SUMIF, COUNTIF und AVERAGEIF mit Kriterien wie ">10", "<>x" und den Platzhaltern * und ?. Nachschlagen: VLOOKUP und HLOOKUP, exakt oder ungefähr, INDEX und MATCH. Datum: DATE, YEAR, MONTH, DAY, TODAY, auf Excel-Seriennummern. Finanzen: PMT, FV, PV, NPV. Insgesamt 54 Funktionen mit der Semantik von Excel, und die Formelleiste vervollständigt ihre Namen.

Formate

Fett, kursiv, Ausrichtung, Textfarbe und Füllfarbe sowie ein Zahlenformat pro Zelle: Standard, Zahl, Währung, Prozent, Datum oder Text, mit 0 bis 10 Dezimalstellen, einem Tausendertrennzeichen, dem Währungssymbol und dem Datumsformat. Die Anzeige übernimmt die Dezimal- und Tausendertrennzeichen der verwendeten sgcHTML-Locale, wenn diese sie definiert.

Tastatur wie in Excel

Pfeiltasten, Tab und Shift+Tab, Enter und Shift+Enter, Pos1, Ende, Strg+Pos1, Strg+Ende, Strg+Pfeiltasten, Bild auf und Bild ab. F2 oder Tippen startet die Bearbeitung, Esc bricht ab und Entf löscht. Shift+Pfeiltasten, Shift+Klick oder Ziehen mit der Maus markieren einen Bereich, ein Klick auf eine Kopfzeile markiert eine Zeile oder Spalte, Strg+D und Strg+R füllen nach unten und nach rechts aus, und Strg+Z und Strg+Y machen die eigenen Änderungen des Benutzers rückgängig und stellen sie wieder her.

Formelleiste

Die Formelleiste zeigt den Rohinhalt der Zelle, und ihr Namensfeld springt zu einer Zelle: Geben Sie B12 ein und drücken Sie Enter. Während eine Formel bearbeitet wird, sind ihre Bezüge farbig hervorgehoben, und der Benutzer kann Zellen anklicken oder Bereiche hineinziehen.

Kopieren und Einfügen mit Excel und Google Sheets

Kopieren, Ausschneiden und Einfügen verwenden durch Tabulatoren getrennten Text, das Format, das Excel und Google Sheets in die Zwischenablage legen, sodass sich ein Zellblock in beiden Richtungen zwischen ihnen bewegen lässt. Bei einer Formel, die im Blatt kopiert und anderswo eingefügt oder ausgefüllt wird, werden die relativen Bezüge verschoben und die absoluten beibehalten.

Einfügen und Löschen

Fügen Sie Zeilen oberhalb oder unterhalb und Spalten links oder rechts ein, löschen Sie Zeilen und Spalten, über die Symbolleiste oder das Kontextmenü einer Zelle oder Kopfzeile. Jeder Bezug in jeder Formel wird wie in Excel angepasst, und ein Bezug auf eine gelöschte Zelle wird zu #REF!. Spalten lassen sich durch Ziehen am Rand der Kopfzeile in der Größe ändern, und Zeilen und Spalten können fixiert werden.

XLSX-Import und -Export

Nach Excel exportieren lädt eine .xlsx mit den Formeln und ihren Werten, den Zellformaten und Zahlenformaten, den Spaltenbreiten und den fixierten Bereichen herunter. Importieren liest eine .xlsx mit ihren Formeln und Formaten oder eine .csv, sobald der Benutzer bestätigt, dass sie das aktuelle Blatt ersetzt.

Live-Synchronisierung zwischen Benutzern

Mit LiveSync sehen die Personen, die dasselbe Blatt geöffnet haben, die Änderungen der anderen: Die Zellen, die ein anderer Benutzer geändert hat, werden neu geladen und blinken. Jede akzeptierte Änderung erhöht die Revision des Blattes, und eine Seite, die eine Revision verpasst hat, lädt das ganze Blatt erneut.

Statusleiste und große Blätter

Die Statusleiste zeigt Summe, Mittelwert und Anzahl der Auswahl, und eine Anzeige sagt, ob die Änderungen gespeichert sind. Nur die sichtbaren Zeilen und Spalten befinden sich in der Seite, sodass ein Blatt mit 10.000 Zeilen und 104 Spalten flüssig scrollt. Ohne JavaScript enthält die Seite weiterhin eine einfache Tabelle der Zellen, die Crawler lesen können.

Barrierefreiheit

Das Blatt ist ein WAI-ARIA-Raster mit Zeilen- und Spaltenzahlen und -indizes, und eine höfliche Live-Region kündigt den Zellbezug und seinen Wert an. Es folgt dem Seitenthema, spiegelt sich unter dir="rtl", respektiert reduzierte Bewegung und funktioniert in Handybreite: Touch-Scrollen, Tippen zum Markieren und Doppeltippen zum Bearbeiten.

Wichtige Eigenschaften, Methoden & Ereignisse

Die Member, zu denen Sie am häufigsten greifen.

Das Blatt

Sheet ist ein TsgcHTMLSpreadsheetSheet. SetCell(aRow, aCol, aRaw) und SetCellByName('B2', '=A1*2') setzen eine Zelle, und Raw, Value, Text und Style lesen sie. Ein Raw, das mit = beginnt, ist eine Formel, und ein führendes Apostroph erzwingt Text. Zeilen und Spalten sind in der API 0-basiert, also ist A1 Zeile 0, Spalte 0. Lock und Unlock schützen Änderungen aus Ihren eigenen Threads.

OnCellChange und OnChange

OnCellChange(Sender, aRow, aCol, aOldRaw, aNewRaw, aAccept) läuft für jede Zelle, die ein Benutzer ändert. Ändern Sie aNewRaw, um den Wert zu korrigieren, setzen Sie aAccept auf False, um ihn abzulehnen, oder speichern Sie ihn. OnChange(Sender, aSheet) folgt, sobald die Änderung angewendet und neu berechnet ist: der Ort, um GetLiveSyncFragmentHTML zu senden.

Blätter pro Benutzer

OnGetSheet(Sender, aSheet) liefert das Blatt des Benutzers hinter der Anfrage. Es wird beim Rendern und bei jeder Anfrage aufgerufen, sodass eine Komponente alle Benutzer bedient, jeden mit einem eigenen Blatt.

Maßgebliche Berechnung auf dem Server

Der Browser sendet, was der Benutzer eingegeben hat, und der Server erledigt den Rest: Er wendet die Änderung an, berechnet die davon abhängigen Zellen über einen Abhängigkeitsgraphen neu und antwortet nur mit den geänderten Zellen. Recalculate führt eine vollständige Berechnung aus, und Evaluate berechnet eine Formel außerhalb jeder Zelle. Delphi und .NET liefern dieselben Ergebnisse, dasselbe JSON und dieselben XLSX-Bytes.

Sicherheitsgrenzen

Der Server vertraut dem Browser nie. Er prüft ReadOnly, die Schalter AllowFormulas, AllowFormatting, AllowInsertDelete, AllowImport und AllowExport, die Koordinaten gegen MaxRows (10000) und MaxCols (104), MaxCells (100000), MaxCellLength (8192) und MaxImportSize (5 MB) und ruft dann für jede Zelle OnCellChange auf. OnImport kann eine Datei ablehnen.

Layout

RowCount (100) und ColCount (26) legen die Größe des Blattes fest, FrozenRows und FrozenCols fixieren die Titel, DefaultColWidth, RowHeight und CSSHeight bestimmen die Maße, und ShowToolbar, ShowFormulaBar und ShowStatusBar schalten die Leisten ein oder aus. ExportFileName benennt die heruntergeladene Arbeitsmappe.

XLSX, JSON, CSV und Datasets

SaveToXLSX und LoadFromXLSX schreiben und lesen eine Arbeitsmappe aus dem Code, einschließlich Formeln und Formaten. Am Blatt halten SaveToJSON und LoadFromJSON es in einem einzigen JSON-Format, das Delphi und .NET Byte für Byte gleich schreiben, SaveToCSV und LoadFromCSV verwenden RFC 4180 mit den Rohwerten, und LoadFromDataSet lädt eine Kopfzeile und die Datensätze.

Einfügen, Löschen und Verschieben

InsertRows, DeleteRows, InsertCols und DeleteCols(aIndex, aCount) passen jeden Bezug wie in Excel an. ShiftFormula(aFormula, aDeltaRow, aDeltaCol) verschiebt die relativen Bezüge einer Formel und behält die absoluten bei, dieselbe Regel, die der Browser beim Einfügen und Ausfüllen anwendet.

Ohne Server-Ereignis

Das Blatt sendet an den Endpunkt für Komponenten-Ereignisse der HTMX-Engine oder an ActionURL. Ohne beides ist es ein schreibgeschützter Betrachter des Blattes.

ASP.NET Core

In einer Razor-View rendert der Tag Helper <sgc-spreadsheet> das Blatt, und seine Anfragen beantwortet die sgcHTML-Middleware von UseSgcHtml. Seine Attribute sind name, read-only, rows, cols, frozen-rows, frozen-cols, css-height, die allow-*-Schalter, live-sync, action-url und die Handler on-get-sheet, on-cell-change und on-change.

Die Demo

Demos\60.HTML\01.RunTime\35.Spreadsheet ist sgc Sheets, ein Server auf Port 8137 mit drei Blättern: ein Teambudget, das alle live bearbeiten, mit SUM-Summen, Prozent der Summe, Währungsformat und einem Diagramm, das sich bei jeder Änderung aktualisiert; ein Kreditrechner mit einem Blatt pro Besucher, PMT, einer nach unten ausgefüllten Tilgungstabelle und einem Restschuld-Diagramm; und Umsatz nach Region mit SUMIF und VLOOKUP, XLSX-Export und -Import. Die Versionen für den Entwurfszeitpunkt, Lazarus und .NET spiegeln es.

Weiter entdecken

Online ausprobierenSehen Sie es in der Demo Tabellenkalkulation, live auf dem eSeGeCe-Demoserver.
Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.
Grid-KomponenteDas Daten-Grid für Datasets: sortieren, filtern, gruppieren, Inline-Bearbeitung und Export.
Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.
Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.
PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.
Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Bereit loszulegen?

Laden Sie die kostenlose Testversion herunter und beginnen Sie, Web-UIs in Delphi, C++ Builder und .NET zu erstellen.