あなたが必要だと知らなかった上位5つのAngularデータグリッド機能

Angularは、これまでで最も人気のあるフロントエンド開発ツールです。はい、学ぶのは少し複雑ですが、トップのフロントエンドプログラミング言語として、Angularはすぐに使用できる機能、クロスプラットフォームアーキテクチャ、コードベース全体の一貫性、保守性、モジュラー開発構造を提供します。たとえば、UI ツールボックスやIgnite UI for Angular Libraryなどの UI ライブラリは、Angularフレームワークを最大限に活用し、何よりも優れたコアおよびエンタープライズ データ グリッド機能を構築します。しかし、使用するのに最適なものは何ですか?

いくつかの重要な必須機能があり、開発者が通常、並べ替え、フィルタリング、編集、選択、ページングなどを探していることを完全に理解しています。ただし、最も目立つものであるため、デフォルトでこれらを期待しています。そのため、すべてのUIスーツは、データ管理と視覚化のための上記のオプションを詰め込んだAngularデータグリッドコンポーネントを提供するよう努めています。

これらは今のところ脇に置いておきます。その必要性を確認するためだけに再度リストアップするのではなく、あまり知られていないが必須で、現代のグリッドで非常に役立つ機能に焦点を当てます。

それでは、データグリッドの上位5つのうち、必要だとは知らなかったAngular特徴を見てみましょう。

バッチ編集 – 変更をより適切に蓄積する方法

基本的に、Angularグリッドバッチ編集を使用すると、ユーザーはグリッド内のデータの複数のレコードを変更し、トランザクションを操作してすべての変更を同時に送信できます。バッチ編集を使用して、複数のセル値の変更の保存を延期できます。これらはバッファに保存し、最終的な編集を確認する前に簡単に破棄できます。

何十万、何百万ものレコードを消費するアプリを構築する際にプログラマーが直面する最大かつ最も一般的な課題の一つが、編集用の保守可能でスケーラブルなUXを作成することであることは周知の事実です。そして、グリッドAngularバッチ編集機能はこれに対する解決策として来ます。バッチ編集モードを有効にすると、基になるデータにすぐに影響を与えることなく、変更を蓄積できます。これにより、レコードの更新時にサーバーに送信される HTTP 要求の数が最小限に抑えられます。

パッケージの使用時にコンポーネントを使用してバッチ編集を実装するにはIgnite UI for Angularトランザクション サービスの実装 (IgxTransactionService) を提供するか、独自の実装に置き換える必要があります。当社のIgnite UI for Angularパッケージには、完全なトランザクション、元に戻す、やり直しをサポートする本格的なトランザクションサービスの実装が付属しています。

実践的なチュートリアルやグリッドバッチ編集の例Angular必要がある場合は、トランザクションサービスの構築方法に関する優れた読み物があります。

Advanced Filtering – To Build More Complex Filter Criteria 

Angular Data Grid の高度なフィルタリングは、Angular Material テーブルのすべての列でより複雑なフィルタリング条件を持つグループを作成できるフィルタリング UI を提供することで機能します。この機能を構成すると、高度なフィルタリング ボタンがグリッド ツールバーにレンダリングされます。ユーザーは、このボタンをクリックして、高度なフィルタリングダイアログを開く必要があります。

この例では、ダイアログはザIgxQueryBuilder のコンポーネントを使用して、フィルタリングロジックを生成、表示、および編集します。この機能を有効にするには、allowAdvancedFiltering を設定し、グリッド内に igx-grid-toolbar コンポーネントを追加する必要があります。

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true"> 
    <igx-grid-toolbar></igx-grid-toolbar> 
</igx-grid> 

このコンポーネントのカスタマイズ性を示すために、グリッドの外部でも機能する外部の高度なフィルタリング構成の例を共有します。必要なのは、advanced-filtering-dialog コンポーネントを追加することだけです。

<igx-advanced-filtering-dialog [grid]="grid1"> 

</igx-advanced-filtering-dialog

Angularグリッド状態の永続性とシリアル化されたJSON文字列

State Persistenceを使用すると、プログラマはグリッドの状態を簡単に保存および復元できます。ユーザーが視覚化されたデータに変更を加えたり、並べ替えやフィルタリングなどを適用したりする場合、State Persistence コンポーネントはこれらの変更を保存し、ページが再ロードされた後に復元します。

これは、最も一般的なAngular Grid機能の中で頻繁にリストされているわけではありませんが、特にグリッドのみに集中的に作業する開発者や、次のようなさまざまな機能の状態を事前設定したくない開発者にとっては非常に重要です。

• Make CustomerID column with DESC order 
• [Contains] フィルターを [ProductName] 列に適用します。
• 左側に表示されるように「Lastname」と「Age」をピンで留めます

.基本的に、このメソッドの目的は、シリアル化されたJSON文字列でData Gridの状態を返すことであり、それを取得して任意のデータストレージ(データベース、クラウド、ブラウザーlocalStorageなど)に保存できます。

いつザIgxGridState の指令がグリッドに適用されると、開発者が任意のシナリオで状態の永続性を実現するために使用できる getState メソッドと setState メソッドが公開されます。

仮想化 – データをより消費しやすくする

Angular Grid Virtualization は、データのどの部分が表示され、どのようにレンダリングされるかを正確に追跡するために使用されます。データを小さなチャックにスライスし、ユーザーが水平/垂直にスクロールしてバッファデータをロードしている間に、コンテナビューポートからスワップされます。

レンダリングパフォーマンスを最適化することを目標に、Ignite UI for Angular Grid Virtualization は少し異なる動作をします - DOM 要素を削除して追加する代わりに、データを交換します。ただし、公式ドキュメントページで詳細を読むことができます。

Angular Grid Keyboard Navigation and The Use Of Interactive Keyboard Shortcuts 

有効にすると、さまざまなキーボード操作 (Alt + L、Ctrl + Shift + L、Ctrl + 上矢印、Ctrl + 下矢印など) が提供され、ユーザーがページをナビゲートする方法に関係なく、使いやすさと UX が向上します。

Infragisticsでは、マウス、タッチパッド、キーボードのみのいずれを使用しているかに関係なく、最適なユーザーエクスペリエンスを確保したいと考えています。そのため、ページ内のキーボードナビゲーション用の新しいユーザーインターフェイスパターンであるアクティブ要素ナビゲーションを作成しました。このパターンにより、igxGrid 用に設計されたインターフェイス内のタブ ストップの数が 5 つに減り、効率を上げるための新しいキーボード ショートカットが多数公開されます。各タブストップ要素には単一のエントリポイントがあり、そこからユーザーは矢印キーを使用するだけで、対応するグリッド要素コンテナ内のさまざまなアイテムに簡単に移動できます。したがって、ナビゲーションが簡素化され、使いやすさが向上します。

Ignite UI for Angularデータグリッドで使用されるキーボードナビゲーション機能は、グリッドのアクセシビリティを向上させ、ユーザーが内部の任意のタイプの要素(セル、行、列ヘッダー、ツールバー、フッターなど)をナビゲートできるようにします。言うまでもなく、それはまた完全にariaに準拠しています。

まとめ

Angularグリッドのバッチ編集、高度なフィルタリング、状態の永続性、仮想化、およびキーボードナビゲーションは、Angularグリッド機能に関するガイドや記事ではあまり言及されていません。彼らは舞台裏にとどまり、並べ替え、編集、サイズ変更、ページングなどが彼らの雷を盗みます。あまり一般的ではなく、主にデータグリッドを扱う人々から要求されていますが、それでもプロジェクトにはこれらの上位5つの機能が必要です。

欠点の 1 つは、グリッドとうまく連携するバッチ編集、高度なフィルタリング、状態永続化、仮想化、およびキーボード ナビゲーションに出くわすことがほとんどないことです。ありがたいことに、Ignite UI for Angular Data Gridは、それらを詰め込むだけでなく、その高いパフォーマンスを保証する究極のツールボックスです。

続けて試してみてください。デモを探索し、それらがどのように機能するかを確認します。