序文
私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算の解決に時間の 80% を費やす必要があることがわかりました。
フロントエンド js コードを作成します (テーブルへのユーザーの入力が他のセルに影響するため、計算後の新しい値をユーザーにすぐに提示する必要があるため) バックエンド コードを作成します (ユーザーによるテーブル データへの変更が影響するため)他のテーブルも同様であるため、ユーザーが [保存] をクリックしたときに影響を受けるテーブルのデータを更新する必要があります) 変更された計算方法を実装するため、開発者はコードを変更する必要がありますそこで、他の税務モジュールの機能を調査したところ、税制では多かれ少なかれ計算問題を伴う多数のテーブル コントロールが使用されていることがわかりました。計算方法はすべてハードコーディングされています。
この一般的なコーディング操作である計算は、要件文書自体が Excel の形式で提供されることは言うまでもなく、実際には Excel の数式を非常に彷彿とさせます。 Excel を使用すると、セルに数式を設定できます。ソース セルの値を変更すると、Excel はセルの数式を自動的に計算し、結果の値をターゲット セルに割り当てます。では、このモデルを参照することはできるのでしょうか? 開発者は、複雑で難しい計算ロジックを記述する必要がなく、実装によって提供される式に従って特定の形式のステートメントに変換し、特定の計算エンジンを呼び出すだけで済みます。結果を出力しますか、結果をユーザーに提示しますか、それともデータベースに保存しますか?答えは「はい」です。その中心となるのは自動計算エンジン AutoCalculate です。
効果
AutoCalculate は、複雑な表計算のためのソリューションであり、数百行または数千行の計算ロジック コードを保存できます。今後は、コードの記述が Excel の数式を記述するのと同じくらい簡単になります。
適用範囲
フロントデスク:
ElementUI テーブル、EasyUI Grid コントロール、ParamQuery Grid など、すべての js テーブル コントロールの数式を使用した複雑な操作に適しています。
バックステージ:
適用可能、V8 エンジンが必要
フロントのご利用方法
AutoCalculate は、数式と計算エンジンの 2 つの部分で構成されます。数式は、[Month12,1]#3 = [Month11,1] * 10 のような特定の構文に従って記述された文字列です。計算エンジンは AutoCalculate です。 .js の解析を担当します。まずは数式の書き方から見ていきましょう。
細胞
セル① = セル② + セル③ というシナリオがあるとします。対応する数式は次のとおりです。
[月1,1] = [月1,2] + [月1,3]
まず、 [Month1,1]が何を表しているかを見てみましょう。まず、角括弧[ ]はセルを表し、Month1 は「1 月」に対応する列名で、その後にカンマ,が続き、次の 1 は RowNo = 1 を表します。 。 等々、
[Month1,2]列が「1 月」で RowNo = 2 のセルを表します。
[Month1,3]列が「1 月」で RowNo = 3 のセルを表します。
したがって、 [y,x]を使用してセルを表すことができます。y は列名 (縦座標とも呼ばれます)、x は RowNo の値 (横座標とも呼ばれます) です。
テーブルに RowNo 列がない場合はどうなるでしょうか?答えを見つけたい場合は、読み続けてください
公式を有効にしましょう
//まずAutoCalculate.jsを紹介します AutoCalculate を '../components/AutoCalculate' からインポートします。 ... // AutoCalculate インスタンスを定義します。formulas は数式配列 let autoCal = new AutoCalculate(formulas); /* cal メソッドを呼び出します * GridDatas (必須): テーブル データ * refField (必須): 参照フィールド、つまりセル [y,x] のどのフィールド値が x であるかを示します */ autoCal.cal(gridDatas, refField);
面積式
実際、1 月、2 月、3 月... に加えて、10 月にも同様の計算式があります。
[月1,1] = [月1,2] + [月1,3] [月2,1] = [月2,2] + [月2,3] [月3,1] = [月3,2] + [月3,3] … … … [月10,1] = [月10,2] + [月10,3]
つまり、単純なシナリオでは、このような数式を 10 個記述する必要がありますが、これは問題になりません。ただし、多数の数式が含まれる一部のテーブルでは、この記述方法には間違いが起こりやすいなどの欠点があります。式も長くなり、書き終わるまでに時間がかかります。そこで面積の公式というものがあります。
上記の式を観察すると、各式は実際には次のような式に置き換えることができることがわかります。
[@,1] = [@,2] + [@,3]
ここには明確な列名はなく、プレースホルダー @ が使用されているだけですが、上記の 10 個の式を表すには十分です。現時点では、列名を適切な位置に入力するだけでよいため、最終的な式は次のようになります。
{月 1、月 2、月 3、月 4、月 5、月 6、月 7、月 8、月 9、月 10}[@,1] = [@,2] + [@,3] 1 つの式が 10 個の式と等価になるように,列名を で区切って中括弧{ }で囲む必要があります。
次の式に示すように、プレースホルダーは縦座標だけでなく横座標にも使用できます。
//式 1: [年合計,3] = [月 1,3] + [月 2,3] + [月 3,3] + [月 4,3] + [月 5,3] + [月 6,3] + [月 7,3] + [月 8 ,3] + [月9,3] + [月10,3] //式 2: [年合計,4] = [月1,4] + [月2,4] + [月3,4] + [月4,4] + [月5,4] + [月6,4] + [月7,4] + [月8 ,4] + [月9,4] + [月10,4] //式 3: [年合計,5] = [月1,5] + [月2,5] + [月3,5] + [月4,5] + [月5,5] + [月6,5] + [月7,5] + [月8 ,5] + [月9,5] + [月10,5] //式 4: [年合計,6] = [月 1,6] + [月 2,6] + [月 3,6] + [月 4,6] + [月 5,6] + [月 6,6] + [月 7,6] + [月 8 ,6] + [月9,6] + [月10,6] //式 5: [年合計,2] = [月1,2] + [月2,2] + [月3,2] + [月4,2] + [月5,2] + [月6,2] + [月7,2] + [月8 ,2] + [月9,2] + [月10,2] //式 6: [年合計,7] = [月1,7] + [月2,7] + [月3,7] + [月4,7] + [月5,7] + [月6,7] + [月7,7] + [月8 ,7] + [月9,7] + [月10,7] //式 7: [年合計,9] = [月1,9] + [月2,9] + [月3,9] + [月4,9] + [月5,9] + [月6,9] + [月7,9] + [月8 ,9] + [月9,9] + [月10,9] //式 8: [年合計,12] = [月1,12] + [月2,12] + [月3,12] + [月4,12] + [月5,12] + [月6,12] + [月7,12] + [月8 ,12] + [月9,12] + [月10,12] //式 9: [年合計,13] = [月1,13] + [月2,13] + [月3,13] + [月4,13] + [月5,13] + [月6,13] + [月7,13] + [月8 ,13] + [月9,13] + [月10,13]
面積公式を使用すると、これは次のように記述できます。
{2, 3, 4, 5, 6, 7, 9, 12, 13}[年合計,@] = [月1,@] + [月2,@] + [月3,@] + [月4,@] + [月 5、@] + [月 6、@] + [月 7、@] + [月 8、@] + [月 9、@] + [月 10,@]面積公式は数式の記述に大きな利便性をもたらしていることがわかります。
js構文をサポート
実際のシナリオでは、以下に示すような複雑な数式が頻繁に発生します。このような数式では、Excel に付属の Max 関数を使用します。
[月 1,9] = ([月 1,6] - [月 1,7] - [月 1,8] > 0 ? [月 1,6] - [月 1,7] - [月 1,8] : 0) + [月 1 ,5]
ご覧のとおり、数式は js 構文をサポートしています。js 解析エンジンによって認識される構文である限り、js 変数または js 関数を数式の等号の右側に置くことができます。 。
ここで注意すべき点は、配列要素を数式に入れることができないことです。js の配列要素には通常「[ ]」記号があり、数式内のセル インジケーター「[ ]」と競合するため、配列要素は禁止されています。注意してください。これ。
[y]式
次に、図に示すように、そのような関係がある別のシナリオを見てみましょう。
セル① = セル② - セル③
次の式をすぐに書くことができます。
[列3,1] = [列2,1] - [列1,1] [列3,2] = [列2,2] - [列1,2]
このように書くことに問題はありませんが、ここでの行は固定されていないこと、つまり、テーブル内の行数はその時点のデータベースの状況に完全に依存する可能性があることに注意してください。今日はデータが 3 行だけ、明日は 5 行、明後日は 50 行になります。行数が増えると式を追加することは不可能なので、この種の行数が不確かな表の場合は、通常の式と比較して新しい書き方を [y] 式と呼びます。 、水平座標がありません。
[列3] = [列2] - [列1]
数式が 1 行だけあると、自動計算は指定された列名のすべての行に数式を適用します。
列の合計と小数点以下の桁数
場合によっては、特定の列の合計を求めることが最終的な目標ではない場合もありますが、たとえば、次のような関係が存在します。
セル③ = セル① / セル②
セル②は、 <GroupApprovedTotal>という<列名>を使用して表すGroupApprovedTotal列の合計値です。さらに、ここの行は固定されておらず、[y] 式を使用する必要があるため、式は次のように記述する必要があります。
[グループ承認合計パーセント] = [グループ承認合計] / <グループ承認合計>
除算では除数を 0 にすることはできないことがわかっているため、正しい書き方は次のようにする必要があります。
[グループ承認合計パーセント] = <グループ承認合計> === 0 ? 0 : [グループ承認合計] / <グループ承認合計>
この数式をコードに入力してプログラムを開始すると、得られる値が十分正確ではないことがすぐにわかるはずです。たとえば、セル①の場合、上のセル③に表示される値は 66.91% です。セル②は上の図と同じ値です。セル③はおそらく 67% です。これはなぜでしょうか。
デフォルトでは、AutoCalculate は計算結果を小数点以下 2 桁 (67%、つまり 0.67) に保持します。66.91%、つまり 0.6691 を取得したい場合は、この時点で小数点以下 4 桁を保持する必要があります。したがって、完全な記述は次のようになります。
[グループ承認合計パーセント]#4 = <グループ承認合計> === 0 ? 0 : [グループ承認合計] / <グループ承認合計>
数式内の等号の左側、および割り当てられたセルの右側に、「#」記号を追加し、その後に小数点以下の桁数を追加します。「#」と数値の間にスペースを入れることはできないことに注意してください。小数点以下の桁数を指定でき、前後にスペースを入れることもできます。
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]
データソース全体で計算する
クロスデータソースコンピューティングとは何ですか? Excel の数式を使用したことがある友人なら、下のセルの数式が何を表しているのか理解できるはずです。明らかに、このセルの値は他のシート データの計算値です。クロスデータ ソース計算は、このようなシナリオを処理するために特別に設計されています。
ここでは、「バックエンドの使用法」の章で実際に使用できるように、数式を記述して AutoCalculate を呼び出す方法を説明します。
まず、他のデータ ソース セルからデータを取得するには、セルを展開する必要があります。以前は、セルは [y,x] のように見えていました。ここでは、次のようなセルもあります。 y] が単一のセルになります。このように単一のセルが表示されます。セル: [外部データ ソース、y、必要なデータを見つけます。
これは 3 要素セルを使用した数式です。
[月 1,4] = [出力税,月 1,7]
このうち、OutputTax は特定のデータ ソースの名前です。名前は簡潔であればあるほど良くなります。そうしないと、複雑な数式を記述すると非常に長くなり、読みにくくなります。
次の式は、OutputTax と TaxRate という 2 つのデータ ソースから値を取得します。
[Month1,5] = [OutputTax,Month1,10] * (1 + [TaxRate,Month1,1] / 100)
前の章の内容を読んでいただければ、次の数式の意味はすでに理解できていると思います。最初の 3 行の数式は外部データ ソースを使用し、地域の数式の記述方法と組み合わせています。
計算メソッドを呼び出すときです。効果を示すために、ボタンを追加し、ボタン イベントにメソッドを記述しました。
私たちが何をしたか見てみましょう:
①外部データソースからoutputTaxDatasを取得する
② 現在のテーブルのデータソースpayableTaxDatasを取得
③データベースから別の外部データソースtaxRateDatasを取得します
④ ここが重要なポイントです。AutoCalculate のコンストラクターを見てみましょう。パラメータは 2 つあります。
数式:数式、配列
オプション: オプションのパラメータ、オブジェクト object
Options には外部データ ソースを表す属性 externalDatas があり、複数のデータが存在する可能性があるため、これは配列であり、各配列要素は 3 つの属性を持つオブジェクトです。
name: 外部データ ソースの名前。ここで選択した名前は、式内の外部データ ソースの名前に対応します。
refField: 参照フィールド
データ: データソース
AutoCalculate をインスタンス化した後、ここで新しいメソッド Calculate が呼び出されます。これには 2 つのパラメータがあります。
GridDatas: 再計算が必要なテーブル データは配列です
refField: 参照フィールド
AutoCalculate はすべての JS テーブル コントロールをサポートしており、JS テーブル コントロールの種類に関係なく、データは通常、次の形式で抽出できるため、このメソッドを使用してバックグラウンドで呼び出すことができます。配列を渡すだけです。
⑤ Calculate を呼び出した後、payableTaxDatas の値はすでに最新の計算値になっていますので、それを現在のテーブルにバインドするだけです。
プログラム実行後のインターフェース:
クリックしてデータを取得した後:
バックエンドの使用法
バックグラウンドで AutoCalculate を呼び出すには、V8 エンジンを使用する必要があります。もう 1 つの重要な点は、以下に示すように、バックグラウンドで AutoCalculate を呼び出すために数式も必要であるということです。
バックグラウンド呼び出しを容易にするために、数式を別のファイルとして抽出します。
AutoCalculate バックグラウンド呼び出しはプロジェクトにカプセル化されており、使用は非常に簡単です。
呼び出し方法は図のとおりです。
または、段階的に分析します。
① 現在のテーブルのデータを保存します
②式が置かれているjsファイルのディレクトリを取得する
③ 2つの外部データソースを取得する
④ ステップ②と③で取得したデータを使用して、カプセル化されたバックグラウンド メソッドを呼び出します。ここで、FormulaExpression は数式です。つまり、この式を使用して、指定した js ファイル内の数式を見つけます。
⑤ 前のステップで返された newData は計算後の最新データになっています。これらのデータをデータベースに保存します。
注意事項
数式を記述する際の注意点は次の 2 つです。
セル内にスペースは使用できません
/正しい書き方: [月12,1] = [月11,1] * 10 //間違った書き方: [月12,1] = [月11,1] * 10
小数点記号と小数点の前にスペースを入れてはいけません。
//正しい書き方: [月12,1] #3 = [月11,1] * 10 //間違った書き方: [月12,1] # 3 = [月11,1] * 10
これで、ハードコーディングに別れを告げ、フロントエンド テーブルの自動計算を許可することについてのこの記事は終わりました。フロントエンド テーブルの自動計算の詳細については、downcodes.com で以前の記事を検索するか、引き続き次の関連記事を参照してください。今後とも downcodes.com をサポートしていただければ幸いです。