1. ホーム
  2. Web制作
  3. ヒントとコツ

を、"li "を、"li "を、"li "を、"li "を

2022-01-25 02:07:26

<スパン 前文

私のチームが税制モジュール開発に取り組んでいたとき、特にテーブル(Grid)において、計算を解くのに80%の時間を費やす必要があることがわかりました。

  • フロントエンドのjsコードを書く(グリッドでのユーザー入力が他のセルに影響するため、新しい値をオンザフライでユーザーに表示する必要があるため)。
  • バックエンドのコードを書く(ユーザーがテーブルのデータを変更すると他のテーブルにも影響するので、ユーザーが保存をクリックしたときに影響するテーブルのデータを更新する必要があるため)
  • 開発者がコードを修正するような計算の変更を実装する。

そこで、他の税務モジュールの機能を調査したところ、税務システムはフォームコントロールを多用しており、多かれ少なかれ計算に関与していることがわかりました。しかも、計算の処理方法はすべてハードコーディングされている。

計算という、当たり前のように行われているコーディング動作は、実はExcelの数式を彷彿とさせるものであり、要件定義書自体がExcel形式で提供されていることは言うまでもありません。Excelを使う場合、セルに数式を設定し、ソースセルの値を変更することで、Excelが自動的にセルの数式を計算し、その結果の値がターゲットセルに与えられます。だから、我々はこのモデルを参照することができます、開発者はもはや複雑で困難な計算のロジックを理解するために書く必要はありません、ちょうど提供される式の実装によると、彼らはステートメントの特定の形式に変換されますし、計算エンジンの出力結果のいくつかの種類を呼び出す、結果は、ユーザーに表示またはデータベースに永続化されるのだろうか?答えはイエスであり、そのすべての中心にAutoCalculate、自動計算エンジンです。

役割

AutoCalculateは、複雑なテーブル操作のためのソリューションで、何百行もの計算ロジックのコードを排除し、Excelの数式を書くように簡単にコードを書くことを可能にします。

適用範囲

フロントデスク

ElementUIフォーム、EasyUIグリッドコントロール、ParamQueryグリッド、その他すべてのjsフォームコントロールで数式を使った複雑な操作を行う場合

バックエンド

適用可能、V8エンジンが必要

フロントエンドでの使用

AutoCalculateは、計算式と計算エンジンの2つの部分から構成されています。計算式は、例えば [Month12,1]#3 = [Month11,1] * 10 のように特定の構文に従って書かれた文字列で、計算エンジンは AutoCalculate.js で、この計算式を解析する役割を担います。以下から、計算式の書き方を説明する。

セル

仮に、セル①=セル②+セル③のシナリオがあった場合、対応する数式は次のようになります。

gcc -o lz77 main.o lz77.o tree.o bitio.o 
bitio.o: In function `bitof': 
bitio.c:(.text+0xd): undefinierte Referenz auf `log' 
bitio.c:(.text+0x1a): Undefinierter Verweis auf `ceil' 
collect2: Fehler: ld gab 1 Exit-Status zurück 
Makefile:13: Rezept für Ziel 'lz77' fehlgeschlagen 
make: *** [lz77] Error 1

まずは rfc3797.c:(.text+0xe7f): undefinierte Referenz auf `log' これは何を表しているのでしょうか?まず、括弧の cc -lm -o randomselection rfc3797.c MD5.c はセル、Month1、つまり "1月" に対応する列名を表し、その後にコンマが続きます。 , の後に1が続くとRowNo = 1となり、以下同様です。

[Month1,2] は、"January" とリストされたセルと RowNo = 2 を表します。

[Month1,3] は、quot;January" および RowNo = 3 としてリストされているセルを表します。

そこで [y,x] はセルを表し、yは列名(縦座標)、xはRowNoの値(横座標)です。

テーブルにRowNo列がない場合はどうすればよいのでしょうか?その答えを知りたい方は、続きをお読みください。

計算式をうまく使う

//First introduce AutoCalculate.js
import AutoCalculate from '... /components/AutoCalculate';
...

//define an instance of AutoCalculate, with formulas as an array of formulas
let autoCal = new AutoCalculate(formulas);

/* Call the cal method
 * gridDatas (required): formulas
 * refField (required): reference field, that is, the cell [y,x] in which x is the value of the field
 *autoCal.cal(gridDatas, refField);

面積の計算式

実は、1月、2月、3月に加え、......10月、つまり、にも同様の計算式が存在するのです。

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

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

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

......
......
......

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

このような数式を10個書く必要があるわけですが、単純なシナリオであれば問題ないのですが、数式が大量にある表では、この方法は書き間違えやすく、また、数式が長いと、全部書くのに時間がかかるというデメリットもあります。そこで、地域別の計算式がある。

上の式を見ると、それぞれの式は実は次のような式に置き換えることができることがわかります。

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

ここには明示的な列名はなく、プレースホルダーの@があるだけですが、上記の10個の数式を表すには十分です。この時点では、適切な場所にカラム名を記入するだけなので、最終的な数式は次のようになります。

{Month1, Month2, Month3, Month4, Month5, Month6, Month7, Month8, Month9, Month10}[@,1] = [@,2] + [@,3]

でカラム名を設定する必要があります。 , を中括弧で区切って { } というように、1つの数式が10個の数式に相当するようにします。

プレースホルダーは縦座標だけでなく、以下の式のように横座標にも使用できる。

//equation 1.
[YearTotal,3] = [Month1,3] + [Month2,3] + [Month3,3] + [Month4,3] + [Month5,3] + [Month6,3] + [Month7,3] + [Month8,3] + [Month9,3] + [Month10,3]

// Equation 2.
[YearTotal,4] = [Month1,4] + [Month2,4] + [Month3,4] + [Month4,4] + [Month5,4] + [Month6,4] + [Month7,4] + [Month8,4] + [Month9,4] + [Month10,4]

// Equation 3.
[YearTotal,5] = [Month1,5] + [Month2,5] + [Month3,5] + [Month4,5] + [Month5,5] + [Month6,5] + [Month7,5] + [Month8,5] + [Month9,5] + [Month10,5]

// Equation 4.
[YearTotal,6] = [Month1,6] + [Month2,6] + [Month3,6] + [Month4,6] + [Month5,6] + [Month6,6] + [Month7,6] + [Month8,6] + [Month9,6] + [Month10,6]

// Equation 5.
[YearTotal,2] = [Month1,2] + [Month2,2] + [Month3,2] + [Month4,2] + [Month5,2] + [Month6,2] + [Month7,2] + [Month8,2] + [Month9,2] + [Month10,2]

// Equation 6.
[YearTotal,7] = [Month1,7] + [Month2,7] + [Month3,7] + [Month4,7] + [Month5,7] + [Month6,7] + [Month7,7] + [Month8,7] + [Month9,7] + [Month10,7]

// Equation 7.
[YearTotal,9] = [Month1,9] + [Month2,9] + [Month3,9] + [Month4,9] + [Month5,9] + [Month6,9] + [Month7,9] + [Month8,9] + [Month9,9] + [Month10,9]

// Equation 8.
[YearTotal,12] = [Month1,12] + [Month2,12] + [Month3,12] + [Month4,12] + [Month5,12] + [Month6,12] + [Month7,12] + [Month8,12] + [Month9,12] + [ Month10,12]

// Equation 9.
[YearTotal,13] = [Month1,13] + [Month2,13] + [Month3,13] + [Month4,13] + [Month5,13] + [Month6,13] + [Month7,13] + [Month8,13] + [Month9,13] + [ Month10,13]

リージョンの公式を使うと、次のように書くことができる。

{2, 3, 4, 5, 6, 7, 9, 12, 13}[YearTotal,@] = [Month1,@] + [Month2,@] + [Month3,@] + [Month4,@] + [Month5,@] + [Month6,@] + [Month7,@] + [Month8,@] + [Month9 ,@] + [Month10,@]

このように、リージョン式は、数式の記述に大きな利便性をもたらします。

js構文への対応

実用的な場面では、以下のような複雑な数式に遭遇することがよくあります。セルの数式はExcel独自のMax関数を使っていますが、このような数式は以下のように書くことができます。

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

このように、数式は js 構文に対応しているので、数式の等号の右側に js 変数を置いたり、js 関数を置いたりしても、js 構文解析エンジンが認識する構文であれば、サポートされます。

なぜなら、jsの配列要素は通常"[ ]"という記号を持っており、これは数式中のセル表現"[ ]"と衝突するので、配列要素の使用は禁止されているからです。この点にはご注意ください。

y] の式

次に、図のように、次のような関係がある場合を見てみましょう。

セル①=セル②-セル

さっそく次のような数式を書いたのではないでしょうか。

[column3,1] = [column2,1] - [column1,1]
[column3,2] = [column2,2] - [column1,2]

このように書くこと自体は問題ないのですが、ここで注意しなければならないのは、ここでの行は固定ではないということです。つまり、テーブルの行数はその時のデータベースの状況によって全く異なり、今日は3行のデータしかなく、明日は5行、明後日は50行ということもあり得るのです。行数が増えても数式を増やすことはできません。そこで、このような行数が不確定なテーブルには、通常の数式と比較して横方向の座標がないことから、新しい書き方として、[y]式と呼ぶことにします:.

[column3] = [column2] - [column1]

1行の数式だけで、AutoCalculateは指定された列名の下のすべての行に数式を適用します。

合計列と小数点以下の桁数

列の和を求めることが最終目的でない場合もありますが、次の関係のように、計算を完了させるために必要なステップです。

セル③=セル①/セル②の順

セル②は GroupApprovedTotal カラムでは として表現します。 . ここの行が固定されておらず、[y] 式を使う必要があることと合わせて、この式は次のように書く必要があります。

[GroupApprovedTotalPercent] = [GroupApprovedTotal] / <GroupApprovedTotal>

除算では、被除数が0にならないことが分かっているので、正しい書き方は次のようになります。

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

この数式をコードに入れてプログラムを起動すると、得られる値が十分に正確でないことがすぐに分かるはずです。例えば、上のセル③に示されている値は 66.91% ですが、あなたのセル①とセル②が上の値と同じなら、あなたのセル③はおそらく 67% です。これはなぜでしょう?

デフォルトでは、AutoCalculateは小数点以下2桁を維持し、67%、つまり0.67を計算します。66.91%、つまり0.6691を求めたい場合は、小数点以下4桁を維持する必要があるということです。このとき、AutoCalculateに小数点以下4桁を維持する必要があることを伝える必要があるので、完全な書き出しは

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

数式の等号の左側、代入するセルの右側に、"#"の記号と小数点以下の桁数を追加します。"#"と小数点以下の桁数の間にスペースがあってはならず、前後にスペースがあってよいことに注意してください。

RowNoのないテーブル

いよいよ質問にお答えします。「平面上の点はどうやって見つけるのでしょうか?答えは、この点の水平座標と垂直座標が必要です。同様に、表で、セルはどのように見つけるのでしょうか。まず、縦方向の座標は列の名前がすべてわかっているので決定できるが、重要なのは横方向の座標を決定することである。RowNoを使った位置決めは、Excelの左側にある通し番号とよく似ているので、既視感を覚えるかもしれませんが、この番号だけが水平座標として使えるというわけではありません。ユニークな値、つまり繰り返しのない値であれば、水平座標として使用することができる。

例えば、以下の表は2行で固定でRowNoはないが、会社番号(BuCode)に一意性があることがわかるとすると、BuCodeを参照フィールドとして使用でき、BuCodeの値を横座標とすると、数式は次のように書くことができる。

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

RowNoがある場合、RowNoを参照フィールドとして使用する場合に記述します。

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

データソースをまたいで計算する

クロスソース計算とは?エクセルの数式を使ったことがある人なら、次のセルの数式の意味を理解できるはずです。このセルの値が計算後の他のSheetデータの値であることは明らかですが、クロスソース計算とは特にこのような場面に対応するためのものです。

フォアグラウンドでクロスソース計算をすることは、ほとんどないと思いますので、実際に使えるように計算式を書き、AutoCalculateを呼び出す方法を"Background Usage"の項で説明します。

まず、他のデータソースのセルからデータを取得するために、セルを展開する必要があります。以前は、セルはこのような状態でした。[y,x]のようなセルをバイナリセルと呼びますが、このようなセルがあります。[y]は、モナドセルになる、今、あなたはそのようなセルを参照してください。[外部データソース、y,x]、つまり、三項セルです。AutoCalculateのセル検索能力は、二次元から三次元に広がり、テーブルがいくつあっても、AutoCalculateは欲しいデータを見つけることができるということです。

3元セルを使った数式を紹介します。

[Month1,4] = [OutputTax,Month1,7] 

/div

次の数式は、OutputTax と TaxRate という 2 つのデータ・ソースから値を取得します。

[Month1,5] = [OutputTax,Month1,10] * (1 + [TaxRate,Month1,1] / 100)

これまでのセクションを読んでいただければ、次の式の最初の3行が外部データソースを使用し、地域式の書き方を取り入れた意味がおわかりいただけると思います。

計算メソッドを呼び出す時が来ました。効果を実証するために、ボタンを追加して、ボタンイベントにメソッドを書きました。

私たちがしたことを見てください。

外部データソースの取得 outputTaxDatas

現在のテーブルのデータソースを取得する payableTaxDatas

データベースから別の外部データソースtaxRateDatasを取得します。

まず、AutoCalculate のコンストラクタで、2つのパラメータを指定します。

formulas: 数式、配列

options: オプションのパラメータ、オブジェクトオブジェクト

オプションの属性 externalDatas は外部データソースを表す配列で、複数のデータが存在する可能性があるため、配列の各要素はオブジェクトで、3つの属性を持っています。

name: 外部データソースの名前、どのような名前をここで取るか、式中の外部データソースの名前に対応する。

refField: 参照フィールド

datas: データソース

AutoCalculateをインスタンス化した後、ここで新しいメソッドcalculateが呼び出され、2つのパラメータを持っています。

gridDatas: 再計算されるテーブルデータ。

refField: 参照フィールド

AutoCalculateはすべてのjsフォームコントロールをサポートし、このメソッドの助けを借りてバックグラウンドで呼び出すことができます。なぜなら、どのjsフォームコントロールが使用されていても、フォームデータ(純粋なデータ)を抽出できるからです。

計算を呼び出した後、paypalTaxDatasの値はすでに計算された最新の値になっているので、あとは現在のフォームにバインドするだけです。

プログラム実行後のインターフェイスです。

クリックでデータ取得後。

バックエンドの使用方法

AutoCalculateをバックグラウンドで呼び出すには、V8エンジンを使用する必要があります。もう一つの重要なポイントは、AutoCalculateのバックグラウンドでの呼び出しには計算式も必要であり、これまでのやり方では以下のようにExtjsのControllerファイルに全ての計算式を記述していたのですが、この計算式はExtjsのControllerファイルに記述することにしました。

バックエンドの呼び出しを容易にするために、数式を別のファイルとして抽出しました。

AutoCalculateバックエンドの呼び出しはプロジェクトにラップされており、非常に使いやすくなっています。

呼び出しは以下のように行われます。

まだ段階的にパースしています。

現在のテーブルのデータを保存する

計算式のあるjsファイルのディレクトリを取得する

2つの外部データソースを取得

ここで、FormulaExpression は計算式の式、つまり、提供した js ファイルから計算式を見つけるための式です。

前のステップで返された newDatas は、すでに計算後の最新データなので、このデータをデータベースに保存します。

注意事項

式を書くときに注意することが2つあります。

セル内にスペースを入れてはいけない

/{div {{code}} is written correctly as
[Month12,1] = [Month11,1] * 10

// Wrong way to write.
[Month12,1 ] = [ Month11, 1] * 10

小数点以下の数字マーカーと小数点の前にスペースを入れない

// Correct way to write.
[Month12,1] #3 = [Month11,1] * 10

// Wrong way to write.
[Month12,1] # 3 = [Month11,1] * 10

ハードコーディングに別れを告げてフロントエンドのテーブル自動計算を作ることについて、この記事を紹介し、より関連するフロントエンドのテーブル自動計算の内容は、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています!.