要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
フォームの入力要件では、現在ログインしているユーザーのレベルに応じて入力できる領域が異なります。この記事では、フロントエンド テーブル コントロール SpreadJS に基づいて、フロントエンドの分割権限編集の実装スキームを紹介します。
(ブラウザ側のSpreadJSの表示効果)
SpreadJS とは何なのか見てみましょう。
SpreadJS は Excel ライクなフロントエンド テーブル コントロールであり、操作や機能は Excel に非常に似ていますが、Office からは完全に独立しています。SpreadJSをフロントエンドプロジェクトに統合してデプロイした後、ユーザーはPCにH5規格を満たすブラウザ（Chrome、Firefox、Edgeなど）をインストールするだけで、ブラウザ側でSpreadJSを開くことができます。
SpreadJSをより深く理解したい場合は、公式オンライン体験アドレスと学習ガイドを開いて学習してください 次に、パーミッションベース編集の具体的な実装計画を紹介します。
なぜSpreadJSの使用を考えたのですか?
SpreadJS が権限編集の基礎となるフォーム コンポーネントとして選択された理由は、主にビジネス担当者からのインスピレーションによるものです。Excelにはシート保護という仕組みがあります。フォーム保護は、セルのロック ステータスとワークシートの保護ステータスを組み合わせたもので、セルを編集できるかどうかを制御するために使用できます。この編集可能なコントロールの最小粒度はセル レベルに達します。
それを達成するにはどうすればよいでしょうか?
SpreadJSは、フォーム保護機能を備えたExcelライクなフォームコントロールです。編集制御のコア API には、主にセルのロックとフォームの保護が含まれます。編集権限制御は全体として以下の 3 つのカテゴリに分類されます。
(1) ワークシート全体を編集することはできません
Excel ファイルはワークブックと呼ばれ、ワークブックには複数のワークシートが含まれます。デフォルトでは、ワークシートのロック状態は true になっていますが、この時点でワークシート全体を編集不可に設定したい場合は、ワークシートの保護に関連するコードを実行するだけで済みます。
(ワークシート全体は SpreadJS を通じて編集できません)
上図の赤枠で示したコードにより、Sheet1 のすべてのセルが編集できなくなります。設定後もセルが編集できる場合は、元の Excel ファイルのデフォルトのセルのロック状態が false に変更されている可能性があります。このとき、コードを使用するか、右クリックして設定することができます。セルのフォーマット→保護してセルを表示し、ロックされた状態にします。
ワークブック全体を編集できないようにする必要がある場合は、ワークブック内の各ワークシートの保護ステータスを設定するだけで済みます。
(2) 一部のセルは編集できることに注意してください
前述したように、編集不可の原則は、セルのロックとフォーム保護が同時に有効になることです。対象の編集可能セルは、この AND 条件を満たさない限り編集可能です。フォーム保護はワークシート上の制御パラメータであり、セルに対応させることはできないため、条件を失敗させたい場合は、対応するセルのロック ステータスを false に設定するだけで済みます。
(一部のセルはSpreadJS経由で編集できます)
上図の黄色の部分のコードを使用して、セル A1:C6 が編集可能で、その他のセルは編集できないという要件を設定できます。ここでのファイルのデフォルトのセル ロック ステータスは true です。状態が false に変更されているかどうか、変更されている場合は、他のセルのロック状態を true に変更する必要があります。
(3) 一部のセルは編集できないことに注意してください
デフォルトのセル ロック ステータスは true です。少数のセルを編集できない場合は、ワークシートのデフォルトのセル ロック ステータスを false に変更し、編集できない一部のセルのロック ステータスを true に設定することをお勧めします。
(一部のセルはSpreadJSでは編集できません)
上図の赤枠内のコードにより、オレンジ色の領域は編集可能、エリア領域は編集不可という要件を実現できます。複数のリージョンを編集可能に設定する必要がある場合は、リージョン ロック (ロック) 関連の API を引き続き呼び出すことができます。さらに詳細な UI 実装設定とコードについては、SpreadJS 公式フォーラムの関連チュートリアル リンクを参照してください。
簡単な概要
セルの編集制御を理解したら、次はユーザーの権限とセルを紐づけて、ログインユーザーの権限に基づく編集制御を実現します。Web 側のニーズを満たすために、SpreadJS は、表示する必要のないセルに関連する追加情報を記録するために使用されるセル タグ(Tag) 属性をサポートしており、セルの関連情報を記録することができます。セルタグの編集権限。全体的な実装アイデアは次のとおりです。
(1) 事前にセルのタグに権限に関する情報を設定します。このソリューションでは、編集可能なユーザーが文字列の形式でセルに書き込まれます。たとえば、セル タグが「user1」の場合、現在のセルは第 1 レベルのユーザーが編集できることを意味し、セル タグが「user1、user2」の場合、現在のセルは両方のユーザーが編集できることを意味します。第 1 レベルのユーザーと第 2 レベルのユーザー。
(2) 現在のセルのタグにユーザー レベルのタグ情報が含まれているかどうかを横断的にクエリします。含まれている場合は、現在のユーザーがこのセルを編集できることを示し、セルに対応するロック ステータスを false に変更します。
完全な実装デモについてはここをクリックして、詳細なコードを理解してください。この記事では、権限編集の参考実装アイデアを提供します。より良い実装方法がある場合は、コメント エリアで議論してください。
拡張リンク:
Spring Boot フレームワークでの Excel サーバー側のインポートとエクスポートの実装