要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
序文
Excel のようなテーブル アプリケーションでは、一般的な需要シナリオはセル間のデータ連携に基づいています。たとえば、特定の州を選択すると、他のセルのドロップダウン項目がその州の下の都市部に自動的に展開されます。コードとUIレベルからスタートし、データ間の多層連携を実現する方法を解説します。
多階層のデータ連携を実現するUI
ステップ1: データを設定します。
以下の形式でデータを設定します。1行目が都道府県情報、残りの行がその都道府県に対応する市街地情報になります。
ステップ 2: ネーム マネージャーを追加する
以下の手順に従ってネーム マネージャーをそれぞれ作成します。ネーム マネージャーの名前は州、参照エリアは対応する州のエリアです。
ステップ 3: データ検証のレベルを追加する
このシナリオでは、データ検証の最初のレベルは州情報であり、シーケンス検証の形式で完了します。
ステップ4: セカンダリデータ検証を追加する
このシナリオでは、二次データ検証は、州が切り替わった後、それに応じて地域を表すセルのドロップダウン項目が更新されることを意味します。ここでは、シーケンス式検証の形式で実装されます。対応するシーケンス検証式間接( ) 関数の詳細な操作は次のとおりです。
ここで、間接関数内の参照セルは、必要に応じて相対参照または絶対参照を設定する必要があることに注意してください。単一セルのカスケード検証が完了した後、複数の行に展開したい場合は、spreadjs の機能を使用してドラッグして塗りつぶすだけでよく、対応する操作は上図の最後にも記載されています。
コードはカスケード データを実装します
コード実装は全体として UI 操作と一致しており、対応する UI 動作をコード実装に変換することのみが必要です。詳細なコードは次のとおりです。
Step1：データを設定する
sheet.setArray(0,0,[
["陕西省","江苏省"],
["西安市","南京"],
["宝鸡市","常州"],
["汉中市","无锡"],
["渭南市","苏州"],
["延安市","泰州"],
["商洛市","镇江"],
["铜川市","宿迁"]
])
ステップ2: ネームマネージャーをセットアップする
spread.addCustomName("陕西省","=Sheet1!\$A\$2:\$A\$8",0,0)
spread.addCustomName("江苏省","=Sheet1!\$B\$2:\$B\$8",0,0)
ここで、スプレッドはファイル全体を表し、名前マネージャーはファイル レベルとワークシート レベルに分かれており、ここではファイル全体で使用されます。
ステップ 3: レベル 1 データ検証を設定する
let dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=Sheet2!\$A\$1:\$B\$1");
sheet.setDataValidator(0, 4, 10,1,dv,GC.Spread.Sheets.SheetArea.viewport);
ステップ4: セカンダリデータ検証を作成する
let dv2 = GC.Spread.Sheets.DataValidation.createFormulaListValidator("=indirect(\$E1)");
sheet.setDataValidator(0, 5, 10,1,dv2,GC.Spread.Sheets.SheetArea.viewport);
さらに詳細な例については、ここをクリックして実際の戦闘コードにジャンプして表示できます。
拡張リンク:
Spring Boot フレームワークでの Excel サーバー側のインポートとエクスポートの実装
Project Combat: オンライン見積調達システム (React +SpreadJS+Echarts)
SpreadJS と組み合わせた洗練されたフレームワークにより、純粋なフロントエンド Excel オンライン レポート デザインを実現