Verabschieden Sie sich vom Hard-Coding und lassen Sie Ihre Front-End-Tabelle den Instanzcode automatisch berechnen

Vorwort

Als mein Team das Steuersystemmodul entwickelte, stellte ich fest, dass es 80 % seiner Zeit mit dem Lösen von Rechenproblemen verbringen musste, insbesondere mit Berechnungen im Raster. Diese Zeit wurde für Folgendes aufgewendet:

• Schreiben Sie den Front-End-JS-Code (da die Benutzereingaben in der Tabelle andere Zellen beeinflussen, muss der neue Wert nach der Berechnung dem Benutzer sofort angezeigt werden)
• Hintergrundcode schreiben (da sich die Änderungen des Benutzers an den Tabellendaten auf andere Tabellen auswirken, müssen die Daten der betroffenen Tabellen aktualisiert werden, wenn der Benutzer auf „Speichern“ klickt).
• Die Implementierung von Änderungen an Berechnungsmethoden erfordert von Entwicklern eine Anpassung ihres Codes

Ich habe also die Funktionen anderer Steuermodule recherchiert und festgestellt, dass das Steuersystem in großem Umfang Tabellenkontrollen verwendet, die mehr oder weniger Berechnungsprobleme mit sich bringen. Die Methoden zur Verarbeitung von Berechnungen sind alle fest codiert.

Die Berechnung, diese gängige Codierungsaktion, lässt sich in Excel tatsächlich problemlos mit Formeln verknüpfen, ganz zu schweigen davon, dass das Anforderungsdokument selbst im Excel-Format bereitgestellt wird. Wenn wir Excel verwenden, können wir Formeln in Zellen festlegen. Durch Ändern des Werts der Quellzelle berechnet Excel automatisch die Zellformel und weist den resultierenden Wert der Zielzelle zu. Können wir uns also auf dieses Modell beziehen, bei dem Entwickler keine komplexe und schwer verständliche Berechnungslogik mehr schreiben müssen, sondern diese nur basierend auf den von der Implementierung bereitgestellten Formeln in Anweisungen eines bestimmten Formats umwandeln und dann eine bestimmte Berechnungs-Engine aufrufen müssen, um die Ergebnisse zu erzeugen, sie den Benutzern anzuzeigen oder sie in der Datenbank zu speichern? Die Antwort ist ja, und der Kern von all dem ist die automatische Berechnungs-Engine – AutoCalculate.

Wirkung

AutoCalculate ist eine Lösung für komplexe Tabellenoperationen. Sie kann Ihnen Hunderte oder Tausende von Zeilen Berechnungslogikcode ersparen. Ab sofort ist das Schreiben von Code so einfach wie das Schreiben von Excel-Formeln.

Geltungsbereich

Rezeption:

Anwendbar auf komplexe Berechnungen mit Formeln in allen JS-Tabellensteuerelementen wie ElementUI-Tabelle, EasyUI-Grid-Steuerelement, ParamQuery-Grid usw.

Hinter den Kulissen:

Anwendbar, erfordert V8-Motor

Nutzung der Rezeption

AutoCalculate besteht aus zwei Teilen: Formel und Berechnungsmodul. Die Formel ist eine Zeichenfolge, die gemäß einer bestimmten Syntax geschrieben wird, z. B. [Monat12,1]#3 = [Monat11,1] * 10. Das Berechnungsmodul ist AutoCalculate.js, das für die Analyse der Formel verantwortlich ist. Im Folgenden finden Sie eine Einführung in das Schreiben von Formeln.

Zelle

Angenommen, es gibt ein solches Szenario, Zelle ① = Zelle ② + Zelle ③, dann lautet die entsprechende Formel:

[Monat1,1] = [Monat1,2] + [Monat1,3] 

Schauen wir uns zunächst an, was [Month1,1] darstellt. Zunächst stellen die Klammern [ ] eine Zelle dar. Month1 ist der Spaltenname, der „Januar“ entspricht, gefolgt von einem Komma , und die 1 dahinter stellt RowNo = 1 dar, und so weiter.

[Month1,2] repräsentiert die Zelle mit der Spalte "Januar" und RowNo = 2

[Month1,3] repräsentiert die Zelle mit der Spalte "Januar" und RowNo = 3

Wir können also [y,x] verwenden, um eine Zelle darzustellen, y ist der Spaltenname, auch Ordinate genannt, x ist der Wert von RowNo, auch Abszisse genannt

Was ist, wenn die Tabelle keine RowNo-Spalte hat? Wenn Sie die Antwort finden möchten, lesen Sie bitte weiter

Damit die Formel funktioniert

//Importieren Sie zuerst AutoCalculate.js
importiere AutoCalculate aus „../components/AutoCalculate“;
...

//Definieren Sie eine AutoCalculate-Instanz, Formeln sind ein Formel-Array let autoCal = new AutoCalculate(formulas);

/* Call cal-Methode * gridDatas (erforderlich): Tabellendaten * refField (erforderlich): Referenzfeld, d. h. der Wert, dessen Feld in der Zelle [y,x] x ist */
autoCal.cal(gridDatas, refField);

Flächenformel

Tatsächlich gibt es zusätzlich zu Januar, Februar, März...Oktober eine ähnliche Formel, nämlich:

[Monat1,1] = [Monat1,2] + [Monat1,3]

[Monat2,1] = [Monat2,2] + [Monat2,3]

[Monat3,1] = [Monat3,2] + [Monat3,3]

…
…
…

[Monat10,1] = [Monat10,2] + [Monat10,3]

Das heißt, wir müssen 10 solcher Formeln schreiben. In einfachen Szenarien ist das kein Problem, aber bei manchen Tabellen mit einer großen Anzahl von Formeln hat diese Schreibmethode einige Nachteile, z. B. dass man leicht Fehler macht und dass das Schreiben langer Formeln sehr lange dauert. Es gibt also die regionale Formel.

Durch Beobachtung der obigen Formeln können wir feststellen, dass jede Formel durch eine Formel ersetzt werden kann, beispielsweise durch die folgende Formel:

[@,1] = [@,2] + [@,3]

Hier gibt es keinen expliziten Spaltennamen, nur einen Platzhalter @, der aber ausreicht, um die obigen 10 Formeln darzustellen. Zu diesem Zeitpunkt müssen wir nur den Spaltennamen an der entsprechenden Stelle einfügen, die endgültige Formel lautet also:

{Monat1, Monat2, Monat3, Monat4, Monat5, Monat6, Monat7, Monat8, Monat9, Monat10}[@,1] = [@,2] + [@,3]

Sie müssen die Spaltennamen mit trennen , in geschweifte Klammern { } setzen, sodass 1 Formel 10 Formeln entspricht.

Nicht nur für die Ordinate, sondern auch für die Abszisse können Platzhalter verwendet werden, wie zum Beispiel in der folgenden Formel:

//Formel 1:
[JahrGesamt,3] = [Monat1,3] + [Monat2,3] + [Monat3,3] + [Monat4,3] + [Monat5,3] + [Monat6,3] + [Monat7,3] + [Monat8,3] + [Monat9,3] + [Monat10,3]

//Formel 2:
[JahrGesamt,4] = [Monat1,4] + [Monat2,4] + [Monat3,4] + [Monat4,4] + [Monat5,4] + [Monat6,4] + [Monat7,4] + [Monat8,4] + [Monat9,4] + [Monat10,4]

//Formel 3:
[JahrGesamt,5] = [Monat1,5] + [Monat2,5] + [Monat3,5] + [Monat4,5] + [Monat5,5] + [Monat6,5] + [Monat7,5] + [Monat8,5] + [Monat9,5] + [Monat10,5]

//Formel 4:
[JahrGesamt,6] = [Monat1,6] + [Monat2,6] + [Monat3,6] + [Monat4,6] + [Monat5,6] + [Monat6,6] + [Monat7,6] + [Monat8,6] + [Monat9,6] + [Monat10,6]

//Formel 5:
[JahrGesamt,2] = [Monat1,2] + [Monat2,2] + [Monat3,2] + [Monat4,2] + [Monat5,2] + [Monat6,2] + [Monat7,2] + [Monat8,2] + [Monat9,2] + [Monat10,2]

//Formel 6:
[JahrGesamt,7] = [Monat1,7] + [Monat2,7] + [Monat3,7] + [Monat4,7] + [Monat5,7] + [Monat6,7] + [Monat7,7] + [Monat8,7] + [Monat9,7] + [Monat10,7]

//Formel 7:
[JahrGesamt,9] = [Monat1,9] + [Monat2,9] + [Monat3,9] + [Monat4,9] + [Monat5,9] + [Monat6,9] + [Monat7,9] + [Monat8,9] + [Monat9,9] + [Monat10,9]

//Formel 8:
[JahrGesamt,12] = [Monat1,12] + [Monat2,12] + [Monat3,12] + [Monat4,12] + [Monat5,12] + [Monat6,12] + [Monat7,12] + [Monat8,12] + [Monat9,12] + [Monat10,12]

//Formel 9:
[JahrGesamt,13] = [Monat1,13] + [Monat2,13] + [Monat3,13] + [Monat4,13] + [Monat5,13] + [Monat6,13] + [Monat7,13] + [Monat8,13] + [Monat9,13] + [Monat10,13]

Mithilfe der Flächenformel lässt sich dies wie folgt darstellen:

{2, 3, 4, 5, 6, 7, 9, 12, 13}[JahrGesamt,@] = [Monat1,@] + [Monat2,@] + [Monat3,@] + [Monat4,@] + [Monat5,@] + [Monat6,@] + [Monat7,@] + [Monat8,@] + [Monat9,@] + [Monat10,@]

Es ist ersichtlich, dass die regionale Formel das Schreiben von Formeln erheblich vereinfacht.

Unterstützt JS-Syntax

In der Praxis stoßen wir häufig auf komplexe Formeln. Wie in der folgenden Abbildung gezeigt, verwendet die Zellformel die Max-Funktion von Excel. Eine solche Formel können wir folgendermaßen schreiben:

[Monat1,9] = ([Monat1,6] - [Monat1,7] - [Monat1,8] > 0 ? [Monat1,6] - [Monat1,7] - [Monat1,8] : 0) + [Monat1,5] 

Wie Sie sehen, unterstützt die Formel die JS-Syntax. Sie können eine JS-Variable oder sogar eine JS-Funktion auf der rechten Seite des Gleichheitszeichens in der Formel platzieren. Solange die Syntax von der JS-Parsing-Engine erkannt wird, wird sie unterstützt.

Zu beachten ist hierbei, dass Sie keine Array-Elemente in die Formel einfügen können, da JS-Array-Elemente normalerweise das Symbol „[ ]“ aufweisen, das mit dem Zelldarstellungssymbol „[ ]“ in der Formel in Konflikt steht. Daher ist die Verwendung von Array-Elementen verboten. Bitte beachten Sie dies.

[y] Formel

Schauen wir uns als nächstes ein anderes Szenario an. Wie in der Abbildung gezeigt, gibt es eine solche Beziehung:

Zelle① = Zelle② - Zelle③

Sie könnten schnell die folgende Formel schreiben:

[Spalte3,1] = [Spalte2,1] - [Spalte1,1]
[Spalte3,2] = [Spalte2,2] - [Spalte1,2] 

Es ist nichts falsch daran, es so zu schreiben, aber ich muss Sie daran erinnern, dass die Zeilen hier nicht festgelegt sind, d. h. die Anzahl der Zeilen in der Tabelle hängt vollständig von der aktuellen Datenbanksituation ab. Es ist möglich, dass es heute nur 3 Datenzeilen gibt, morgen 5 Zeilen und übermorgen 50 Zeilen. Wir können keine Formeln hinzufügen, wenn die Anzahl der Zeilen zunimmt. Daher haben wir für diese Art von Tabelle mit einer unsicheren Anzahl von Zeilen eine neue Schreibweise. Ich nenne sie die [y]-Formel, weil sie im Vergleich zur normalen Formel keine horizontale Achse hat:

[Spalte3] = [Spalte2] - [Spalte1]

Sie benötigen nur eine Formelzeile und AutoCalculate wendet die Formel auf alle Zeilen unter dem angegebenen Spaltennamen an.

Summenspalten mit Nachkommastellen

Manchmal müssen wir die Summe einer Spalte ermitteln. Auch wenn das Ermitteln der Summe einer Spalte möglicherweise nicht unser endgültiges Ziel ist, ist es ein notwendiger Schritt, um die Berechnung abzuschließen, wie beispielsweise bei der folgenden Beziehung:

Zelle ③ = Zelle ① / Zelle ②

Zelle ② ist der Gesamtwert der Spalte GroupApprovedTotal , den wir mit <列名> darstellen, d. h.: <GroupApprovedTotal> . Darüber hinaus sind die Zeilen hier nicht festgelegt, sodass die Formel [y] benötigt wird. Die Formel sollte daher wie folgt geschrieben werden:

[GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal>

Wir wissen, dass der Divisor bei einer Division nicht 0 sein kann, daher muss er korrekt wie folgt geschrieben werden:

[GroupApprovedTotalPercent] = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>

Wenn Sie diese Formel in Ihren Code einfügen und das Programm starten, sollten Sie schnell feststellen, dass der erhaltene Wert nicht genau genug ist. Beispielsweise beträgt der in Zelle ③ oben angezeigte Wert 66,91 %. Wenn Ihre Zelle ① und Zelle ② die gleichen Werte wie im obigen Bild haben, liegt Ihre Zelle ③ wahrscheinlich bei 67 %. Warum ist das so?

Standardmäßig behält AutoCalculate 2 Dezimalstellen für das Berechnungsergebnis. 67 % sind 0,67. Wenn Sie 66,91 % (0,6691) erhalten möchten, müssen Sie 4 Dezimalstellen beibehalten. Zu diesem Zeitpunkt müssen Sie AutoCalculate mitteilen, dass Sie 4 Dezimalstellen beibehalten müssen. Daher sollte die vollständige Schreibweise folgendermaßen lauten:

[GroupApprovedTotalPercent]#4 = <GroupApprovedTotal> === 0 ? 0 : [GroupApprovedTotal] / <GroupApprovedTotal>

Fügen Sie links neben dem Gleichheitszeichen in der Formel und rechts neben der zuzuweisenden Zelle das Zeichen „#“ und dann die Anzahl der Dezimalstellen hinzu. Beachten Sie, dass zwischen dem „#“ und den Dezimalstellen kein Leerzeichen stehen darf, davor und danach jedoch Leerzeichen möglich sind.

Tabelle ohne Zeilennummer

Es ist endlich Zeit, diese Frage zu beantworten. Ich möchte alle fragen: Wie finden wir einen Punkt auf einer Ebene? Die Antwort ist, dass wir die horizontalen und vertikalen Koordinaten dieses Punktes benötigen. Und wie finden wir eine Zelle in einer Tabelle? Zuerst können wir die vertikale Achse bestimmen. Da alle Spaltennamen bekannt sind, liegt der Schlüssel in der Bestimmung der horizontalen Achse. Die Verwendung von RowNo zur Positionierung kommt Ihnen vielleicht bekannt vor, da sie der Seriennummer auf der linken Seite von Excel sehr ähnlich ist. Das bedeutet jedoch nicht, dass als horizontale Achse nur Zahlen verwendet werden können. Solange der Wert eindeutig ist, also nicht wiederholt wird, kann er als horizontale Achse verwendet werden.

Angenommen, die folgende Tabelle hat zwei feste Zeilen und keine Zeilennummer. Es ist jedoch ersichtlich, dass die Firmennummer (BuCode) eindeutig ist. Daher kann BuCode als Referenzfeld verwendet werden. Der Wert von BuCode stellt die horizontale Achse dar. Die Formel lässt sich daher wie folgt schreiben:

[SumDiffMonth1,F1136] = [GroupApprovalMonth1,F1136] - [Month1,F1136]
[SumDiffMonth1,F2056] = [GroupApprovalMonth1,F2056] - [Month1,F2056]

Wenn eine Zeilennummer vorhanden ist, schreiben Sie diese folgendermaßen, wenn Sie die Zeilennummer als Referenzfeld verwenden:

[SumDiffMonth1,2] = [GroupApprovalMonth1,2] - [Month1,2]
[SumDiffMonth1,3] = [GroupApprovalMonth1,3] - [Month1,3]

Datenquellenübergreifende Berechnung

Was ist Cross-Data-Source-Computing? Freunde, die schon einmal mit Excel-Formeln gearbeitet haben, sollten in der Lage sein, zu verstehen, was die Formel in der Zelle unten bedeutet. Offensichtlich ist der Wert dieser Zelle der Wert, nachdem die Daten in anderen Blättern berechnet wurden. Die datenquellenübergreifende Berechnung ist speziell für solche Szenarien konzipiert.

Datenquellenübergreifende Berechnungen führen wir selten bis gar nie im Vordergrund durch. Hier wollen wir euch im Kapitel „Hintergrundverwendung“ erklären, wie ihr Formeln schreibt und AutoCalculate aufruft, damit ihr es auch tatsächlich nutzen könnt.

Um Daten aus anderen Datenquellenzellen zu erhalten, müssen wir zunächst die Zellen erweitern. Zuvor waren unsere Zellen wie folgt: [y,x], die wir vorerst als binäre Zellen bezeichnen werden. Es gab auch Zellen wie diese: [y], die zu univariaten Zellen wurden. Jetzt sehen Sie Zellen wie diese: [externe Datenquelle, y, x], die ternäre Zellen sind. Das Auftreten ternärer Zellen erweitert die Fähigkeit von AutoCalculate, Zellen von zwei auf drei Dimensionen zu lokalisieren, d. h., egal, wie viele Tabellen Sie haben, AutoCalculate kann die gewünschten Daten finden.

Hier ist eine Formel mit einer ternären Zelle:

[Monat1,4] = [Ausgabesteuer,Monat1,7]

OutputTax ist der Name einer Datenquelle. Sie können sie beliebig benennen. Je einfacher, desto besser. Andernfalls wird eine komplexe Formel zu lang zum Lesen.

Die folgende Formel verwendet Werte aus zwei Datenquellen: OutputTax und TaxRate:

[Monat1,5] = [Ausgabesteuer,Monat1,10] * (1 + [Steuersatz,Monat1,1] / 100)

Ich glaube, dass Sie nach dem Lesen der vorherigen Kapitel bereits die Bedeutung der folgenden Formeln verstehen können. In den ersten drei Formelzeilen werden externe Datenquellen verwendet und mit der Schreibweise von Flächenformeln kombiniert.

Es ist Zeit, unsere Berechnungsmethode aufzurufen. Um den Effekt zu demonstrieren, habe ich eine Schaltfläche hinzugefügt und die Methode in das Schaltflächenereignis geschrieben.

Sehen Sie, was wir getan haben:

① Holen Sie sich eine externe Datenquelle outputTaxDatas

② Holen Sie sich die Datenquelle payableTaxDatas der aktuellen Tabelle

③ Holen Sie sich eine weitere externe Datenquelle taxRateDatas aus der Datenbank

④ Hier ist der entscheidende Punkt. Schauen wir uns zunächst den Konstruktor von AutoCalculate an. Es gibt zwei Parameter:

Formeln: Formel, ein Array

Optionen: optionaler Parameter, ein Objekt

options hat eine Eigenschaft externalDatas, die die externe Datenquelle darstellt. Es ist ein Array. Da es mehrere Daten geben kann, ist jedes Array-Element ein Objekt mit 3 Eigenschaften:

Name: der Name der externen Datenquelle. Der Name entspricht hier dem Namen der externen Datenquelle in der Formel.

refField: Referenzfeld

Daten: Datenquelle

Nach der Instanziierung von AutoCalculate wird hier eine neue Methode calculate aufgerufen, die über 2 Parameter verfügt:

gridDatas: Tabellendaten, die neu berechnet werden müssen, ein Array

refField: Referenzfeld

Der Grund, warum AutoCalculate alle JS-Tabellensteuerelemente unterstützt und im Hintergrund aufgerufen werden kann, liegt in der Verwendung dieser Methode, da die Tabellendaten (reine Daten) unabhängig vom JS-Tabellensteuerelement extrahiert werden können. Die Daten liegen normalerweise in Array-Form vor, übergeben Sie also einfach das Array.

⑤ Nach dem Aufruf von calculate ist der Wert von payableTaxDatas bereits der neueste Wert nach der Berechnung. Jetzt können Sie ihn an die aktuelle Tabelle binden.

Die Schnittstelle nach dem Ausführen des Programms:

Nach dem Klicken auf „Daten abrufen“:

Backend-Nutzung

Um AutoCalculate im Hintergrund aufzurufen, müssen wir die V8-Engine verwenden. Ein weiterer wichtiger Punkt ist, dass die Formel auch benötigt wird, um AutoCalculate im Hintergrund aufzurufen. Unsere bisherige Vorgehensweise besteht darin, alle Formeln in die Extjs-Controller-Datei einzufügen, wie unten gezeigt:

Um Hintergrundaufrufe zu erleichtern, extrahieren wir die Formel als separate Datei

Der AutoCalculate-Hintergrundaufruf ist im Projekt gekapselt, was die Verwendung sehr einfach macht.

Die aufrufende Methode ist wie in der Abbildung dargestellt:

Oder Schritt-für-Schritt-Analyse:

① Speichern Sie die Daten der aktuellen Tabelle

② Rufen Sie das Verzeichnis der js-Datei ab, in der sich die Formel befindet

③ Besorgen Sie sich zwei externe Datenquellen

④ Rufen Sie die gekapselte Hintergrundmethode auf und verwenden Sie die in den Schritten ② und ③ erhaltenen Daten. FormulaExpression ist der Formelausdruck, d. h. dieser Ausdruck wird verwendet, um die Formel in der von Ihnen bereitgestellten js-Datei zu finden.

⑤ Die im vorherigen Schritt zurückgegebenen newDatas sind die neuesten Daten nach der Berechnung. Speichern Sie diese Daten nun in der Datenbank

Vorsichtsmaßnahmen

Beim Schreiben von Formeln sind zwei Punkte zu beachten:

In Zellen sind keine Leerzeichen erlaubt

/Richtiges Schreiben:
[Monat12,1] = [Monat11,1] * 10

//Falsche Schreibweise:
[Monat12,1 ] = [ Monat11, 1] * 10

Zwischen dem Dezimalstellenmarker und der Dezimalstelle darf kein Leerzeichen stehen

//Richtige Schreibweise:
[Monat12,1] #3 = [Monat11,1] * 10

//Falsche Schreibweise:
[Monat12,1] # 3 = [Monat11,1] * 10

Damit ist der Artikel „Verabschieden Sie sich von Hard Coding und lassen Sie Ihre Front-End-Tabellen automatisch berechnen“ abgeschlossen. Weitere Informationen zur automatischen Berechnung von Front-End-Tabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!