Syncfusion角度データグリッドにおける遅延負荷グループ化を可能にする方法

The Angular grid/Data Grid コンポーネントは、表形式でデータを表示するための機能豊富なコントロールです.機能の広い範囲には、データのバインディング、編集、Excelのようなフィルタリング、カスタムの並べ替え、グループ化、行の並べ替え、行と列の凍結、行の集約、Excel、CSVファイル、およびPDF形式にエクスポートが含まれます.
このブログ記事では、怠惰な負荷グループ化機能とSyncfusion Angle Data Gridでの要求に応じてグループ化されたデータを読み込む方法について議論します.
始めましょう!

何が怠惰な読み込みですか？

通常、ユーザーが列をグループ化すると、グループ化されたレコード全体がサーバーからダウンロードされ、単一の移動にレンダリングされます.しかし、ユーザーが実際にダウンロードされたデータをすべて表示する保証はありません.
例えば、ユーザーがイメージギャラリーウェブサイトを開くときに、ユーザーは最初のイメージだけを見た後にサイトを去ります.読み込まれた画像の残りの部分が見えなくなります.これはメモリと帯域幅を無駄にします.
すべてのデータをロードし、1つの移動でユーザーのためにレンダリングする代わりに、バルクローディングのように、怠惰な読み込みの概念は、必要なセクションだけをロードするのに役立ちます.ユーザーが必要とするまで、残りのデータを読み込みます.

遅延負荷の利点

初期負荷時間の短縮

帯域幅保護.

システム資源の保全

データグリッドにおける遅延負荷機能

正規グルーピングvsレイジー負荷グルーピング

通常のグループ化モードでは、ユーザーが列をグループ化すると、キャプションの行とデータ行が展開状態でレンダリングされます.データ行のレンダリングは、ページサイズによって制限されます.ページサイズを超えた場合、残りのデータ行は次のページに表示されます.
怠惰な負荷グループ化モードでは、データグリッドは、グループアクションを実行しながら、崩れた状態でキャプション行だけをレンダリングします.ユーザーがキャプション列を展開すると、データ行がレンダリングされます.グループキャプション行の最初のレベルは、データ行の代わりにページサイズカウントと見なされます.たとえば、ページサイズの値が5の場合、5つのグループキャプション列が各ページに表示され、これらのキャプション行の内部には、データ行のカウントに制限はありません.
したがって、各グループのキャプション行を含めることができますn データ行またはネストされたキャプション列の数.データの各グループは、ブロック(コレクションまたは行)としてレンダリングされます.スクローラーがブロックの底に達すると、次のブロックがロードされます.これは無限のスクロール機能のように動作します.

遅延負荷グループ化におけるキャッシュモード

すべての現代のブラウザーは、特定のウェブページが消費することができて、ブラウザーが何百万もの要素を扱うように設計されていないかについて、ハードメモリ限界を持ちます.ブラウザでデータポイント/要素数百万をロードしようとすると、ブラウザは応答しなくなります.
継続的にグループ化されたレコードをスクロールしながら、このブラウザの制限のために、我々はこの無責任な問題に直面するでしょう.スクロールがブロックの一番下に到達するたびに、グリッドは新しいグループ化されたデータを問い合わせると、レンダリングされた行を追加します.したがって、それは徐々にDOM重量とブラウザメモリを増加します.
この問題を解決するには、我々の角度データグリッドのオプションがあります:キャッシュモード.このモードを有効にすると、DOM上の限られたブロックのみを維持します.一旦制限を超えると、DOMだけから行要素を削除し、データグリッドインスタンスにグループ化されたデータを維持します.

Syncfusion角度データグリッドにおける遅延負荷グループ化を可能にする方法

これらの手順に従って、SyncFusion角度データグリッドコントロールで怠惰なロードグループ化機能を有効にします.

ステップ1：角度環境とデータグリッドの設定

データグリッドのチェックアウトgetting started ドキュメントページで、角度環境を設定し、データグリッドコンポーネントをアプリケーションに追加します.

ステップ2：モジュール注入

追加機能を持つグリッドを作成するには、必要なモジュールを注入します.グリッドの基本機能を拡張するために以下のモジュールが使用されます.

LazyloAdGroupService :怠惰なロードグループ化機能を使用するためにこのプロバイダーを注入します.

GroupService :グループ化機能を使用するためにこのプロバイダーを注入します.

PageService :この機能を使用してページング機能を使用します.

これらのモジュールをルートNGModuleまたはコンポーネントクラスのプロバイダーセクションに注入する必要があります.
次のコード例を参照してください.
[ app . modules . ts ]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import the GridModule for the Grid component
import { GridModule, PageService, GroupService, LazyLoadGroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, GridModule
  ],
  providers: [PageService, GroupService, LazyLoadGroupService],
  bootstrap: [AppComponent]
})
export class AppModule { }

ステップ3 : lazy負荷グループ化を有効にする

怠惰な負荷グループ化機能を有効にするには、EnablLaazyLoadingプロパティをtrueに設定します.怠惰な負荷グループ化機能はグループ化機能に依存するので、AllowGroupingプロパティをtrueに設定する必要があります.
次のコード例を参照してください.
[ app . component . html ]

<ejs-grid [dataSource]='lazyLoadData' [allowPaging]='true' [allowGrouping]='true' [groupSettings]='groupSettings'>
  <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>
      <e-column field='ProductName' headerText='Product Name' width='100'></e-column>
      <e-column field='ProductID' headerText='Product ID' textAlign='Right' width='120'></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
  </e-columns>
</ejs-grid>

[ app . component . ts ]

import { Component, OnInit } from '@angular/core';
import { createLazyLoadData, lazyLoadData } from './data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public lazyLoadData: object[] = lazyLoadData;

  // Enabled Lazy loading and added initial grouped columns
  public groupSettings: object = { enableLazyLoading: true, columns: ['ProductName', 'CustomerName'] };

  ngOnInit(): void {
    // Generated datasource for lazy load grouping
    createLazyLoadData();
  }
}

このコードを実行したら、次のように出力します.GIF画像.
角度データグリッドにおける遅延負荷グループ化

リソース

このアプリケーションのソースコードをダウンロードできますGitHub ロケーション.

結論

そして、それ!現在、syncfusion角で怠惰な負荷グループ化機能を実装しているData Grid あなたのアプリケーションで.この機能は確実に初期のロード時間を減らして、帯域幅とシステム資源保護を強化します.
この機能を試してみて、下記のフィードバックセクションでコメントを残す!
あなたがまだ顧客でないならば、あなたは我々の30日を試すことができますfree trial これらの機能をチェックアウトします.
また、我々を介してお問い合わせすることができますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!