Angularグリッドデータ操作機能のトップ4とは何ですか?

Angularグリッドデータ操作機能のトップ4とは何ですか?

グリッドコンポーネントの主な目的の1つは、データの操作です。しかし、使用しなければならないAngularグリッドデータ操作のトップ機能は何ですか?詳しくはこちらをご覧ください。

6分で読めます

Grid コンポーネントの主な目的の 1 つは、データの操作です。これは、より消化しやすい方法で変換して表示するだけでなく、簡単に更新する手段を提供することを意味します。ただし、データベースの保守には多くの作業が必要です。ただし、適切なツールを使用する場合を除いては。この場合、新しいデータ レコードの更新、削除、作成などのデータ管理操作を簡単に実行できます。しかし、これだけでは必ずしも十分ではないかもしれません。どうして。なぜなら、データ検証メカニズムを持つことは、必須の機能でもあるからです。

Ignite UI Angularグリッドをこっそり覗く

Ignite UI for Angular Gridには、これらの操作の実行方法をカスタマイズできる強力な公開 API が用意されています。さらに、各データ管理機能では、列のデータ型に基づいていくつかの既定のエディターが公開されており、簡単にカスタマイズできます。

さて、本題に入りますが、データ操作機能のトップ4をご紹介します

Angularグリッドでのセル/行の編集

デフォルトでは、グリッドはセル内編集を使用し、デフォルトのセル編集テンプレートのおかげで、列のデータタイプに基づいて異なるエディターが表示されます。さらに、データ更新アクション用の独自のカスタムテンプレートを定義し、変更のコミットと破棄のデフォルトの動作を上書きできます。

デフォルトの編集を有効にするには、編集する列の[editable]入力をtrueに設定するだけです。

​igxGridの[rowEditable]入力を使用して、編集モードを行に簡単に変更できます。セルの値を変更してから、同じ行の別のセルをクリックまたは移動しても、[完了] ボタンを使用して確認するか、[キャンセル] ボタンを使用して破棄するまで、行の値は更新されません。

行編集イベント

これらの機能の詳細:

Angularトランザクションを使用したグリッドバッチ編集

IgxGrid のバッチ編集機能は、トランザクション サービスに基づいています。Angularフレームワークのおかげで、このようなトランザクションサービスの作成は簡単で保守可能です。Transaction Service は、コンポーネントが基になるデータにすぐに影響を与えることなく変更を蓄積するために使用できる (Angularの DIによる) 注入可能なミドルウェアです。

トランザクション・サービスを利用するのは、データ・ソースの状態を保持し、一度に多数のトランザクションをコミットする必要があるコンポーネントを使用する場合です。

Angularグリッドのバッチ編集

Transaction Service では、トランザクションを追加できます。少なくとも 1 つのトランザクションを追加した後、すべての変更をコミットまたはクリアするか、1 つのレコードのみの変更をコミットまたはクリアできます。詳細なログを保持し、元に戻す操作とやり直し操作を実行できます。

操作 (トランザクション) を実行するたびに、トランザクション ログと元に戻すスタックに追加されます。その後、トランザクション・ログのすべての変更がレコードごとに累積されます。その時点から、サービスは、一意のレコードの追加/更新/削除操作のみで構成される集約状態を維持します。

Angularグリッドデータ検証メカニズム

グリッド編集では、セル/行の編集時にユーザー入力の組み込み検証メカニズムが公開されます。Angular Form 検証機能を拡張して、よく知られた機能と簡単に統合できるようにします。エディターの状態が変わると、編集したセルに視覚的なインジケーターが適用されます。

一部のAngular Forms バリデーター ディレクティブを拡張して、IgxColumn と直接連携します。同じバリデーターが igx-column で宣言的に設定される属性として利用可能です。次のバリデーターは、すぐに使用できます。

  • 必須
  • 分
  • マックス
  • 電子メール
  • 最小の長さ
  • 最大長
  • パターン

列入力が設定され、値が電子メールとして書式設定されることを検証するには、関連するディレクティブを使用できます。

<igx-column [field]="email" [header]="User E-mail" required email><

次のサンプルは、Grid で事前に作成された required、email、および min validator ディレクティブを使用する方法を示しています。

角度グリッドのバリデーターディレクティブの例

Angularグリッド行の追加

グリッドは、インライン行の追加と CRUD 操作Angularための強力な APIを通じてデータ操作を実行する便利な方法を提供します。グリッドのテンプレートで編集アクションが有効になっているAction Stripコンポーネントを追加し、行にカーソルを合わせて、用意されているボタンを使用します。または、「ALT」+「+」を押して、UIを追加する行を生成します。

次のサンプルは、グリッドでネイティブ行の追加を有効にする方法を示しています。セルの値を変更してから、同じ行の別のセルをクリックまたは移動しても、[完了] ボタンを使用して確認するか、[キャンセル] ボタンを使用して破棄するまで、行の値は更新されません。

角度グリッドの行追加機能

まとめ

Ignite UI for Angularの Grid コンポーネント (および一般的に) は、次の理由から、データ管理で重要な役割を果たします。

  • 大規模なデータセットを効率的に視覚化できます。
  • 組み込みの並べ替え、フィルタリング、およびその他の機能を提供します。
  • さまざまなデータ操作機能が提供されているため、データを直接効果的に変更できます。
  • 基になるデータセットなどに対するリアルタイムの更新を確実にするのに役立ちます。

データベースの管理は困難な場合がありますが、適切な機能豊富なツール(Ignite UI Angular Componentsなど)を利用すると、プロセスを大幅に簡素化できます。これにより、新しいデータレコードの編集、削除、作成などの重要なデータ管理操作をほぼ簡単に実行できるほか、Angularグリッドにデータ検証メカニズムを実装できます。

詳細については、以下をご覧ください。

すべてを体験するには、カスタマーポータルにアクセスして最新バージョンを入手してください。いつものように、私たちはいつでもフィードバックをいただき、追加または推奨したいものを聞くことを楽しみにしています。ですから、zkolev@infragistics.comまでメールで、インフラジスティックスで顧客に価値を提供し続けるためにどのように支援できるか教えてください。

Ignite UI for Angular利点

Angular
デモを予約