全グリッドを角度で再調整することなくデータを更新する方法

単一のレコードを更新するために角度グリッド全体を再構築することは非常に非効率的であり、時にはメモリを消費するためにグリッチを引き起こすことがあります.これを処理する最良の方法は、その特定のレコードだけをrerenderする方法を見つけることです.
我々のsyncfusionで不変のモードでAngular Data Grid , あなたは簡単に全体のグリッドコンポーネントを再構築せずにレコードを更新することができます.
角度データグリッドは、データを表形式で表示するための制御である.その豊富な機能セットには、データのバインド、編集、Excelのようなフィルタリング、カスタムの並べ替え、グループ化、凍結行や列などが含まれます.また、Excel、CSVファイル、およびPDF形式にデータをエクスポートすることができます.
このブログ記事では、変更不可能なレンダリングモードの使用方法と、SyncFusionの角度データグリッドコンポーネントで有効にする方法について説明します.

デフォルトレンダリングモード
Immutableモードに飛び込む前に、デフォルトモードでデータグリッドでアクションが実行されたときにデータフローを学びましょう.
次のイメージは、データグリッド内のデータを更新するときの既定の流れを示します.
角度データグリッドの再構築のためのフローチャート
デフォルトでは、角データグリッドは、並べ替えやフィルター処理のような任意のアクションを実行すると、すべてのテーブル行要素を再描画します.データソースで単一の値の変更を行って、Refreshメソッドを呼び出しても、テーブル全体を再表示します.データグリッドは現在のリフレッシュで値の変更を認識していません.

どのように変更不可能なモードが動作し、なぜ我々はそれを必要とするのですか?
不変のモードでは、グリッドアクションを実行している間、角度データグリッドは、変更された、または新しく追加された行だけを再描画します.これにより、変更されなかった行の再描画が行われない.
任意のアクションを実行すると、データグリッドは、現在のJSON結果をプライマリキーを使用して前の結果と比較します.
不変のレンダリング・モードは、オブジェクト・リファレンスを使用することによって、パフォーマンスを再定義している角度データ・グリッドおよび最適化方法を最適化するobject diff concept グリッドは入れ子になったオブジェクトをサポートします.そして、DOMのマッチしないデータだけを再表示します.したがって、明らかに、我々はDOM操作を減らして、このモードでレンダリング性能を強化することができます.
角度データグリッドにおける不変性再構築のためのフローチャート
immutableモードでは、スマートに再構築中にどの要素を変更する必要があるかを決定します.
オブジェクトの差分概念の例をチェックしましょう.

シナリオ1

//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

//updated data. 
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'Swizerland' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'France' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

シナリオ1のデータでは、2番目と3行目の出荷カラムを変更しました.グリッドでこのデータを更新すると、前のデータと比較し、変更を検出し、2番目と3番目の行だけを更新します.

シナリオ2

//initially bound data.
let data = [{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 3, CustomerID: 'HANAR', Freight: 23, ShipCountry: 'UK' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

//updated data. 
let data = [{ OrderID: 5, CustomerID: 'Robert', Freight: 61, ShipCountry: 'Spain' },
{ OrderID: 1, CustomerID: 'VINET', Freight: 34, ShipCountry: 'Germany' },
{ OrderID: 2, CustomerID: 'TOMSP', Freight: 26, ShipCountry: 'USA' },
{ OrderID: 4, CustomerID: 'CHOPS', Freight: 98, ShipCountry: 'Brazil' }];

シナリオ2データでは、先頭に行を追加し、3行目を削除しました.この場合、グリッドは変更を検出し、先頭に新しい行(tr)を追加し、他の行を再配置します.そして、主キーに基づいて削除された行を削除します.
注:AddおよびDeleteの行の機能を使用して、角度データグリッドUIで同じシナリオをシミュレートすることもできます.
最後に、様々なグリッド・アクションにおける不変の対通常の再構成モードの性能を調べましょう.
前のGIF画像から、角度データグリッドの通常のレンダリング・モードと比較して、不変のレンダリング・モードがうまく実行することは、明らかである.

syncfusion角データグリッドにおける変更不能モードを有効にする方法
角度データグリッド内の変更不可能なレンダリングモードを有効にするためにこれらの手順に従って、アプリケーション内のデータを効果的に更新します.

ステップ1:角度データグリッドを設定する
参照Getting started with Angular Data Grid 角度環境を設定し、データグリッドコンポーネントをアプリケーションに追加するドキュメント.

ステップ2:角度データグリッドの不変のレンダリングモードを有効にする
あなたのアプリケーションにデータグリッドを追加した後enableImmutableMode プロパティをtrueに設定します.
次のコード例を参照してください.

<ejs-grid [dataSource]='OrderData' [allowPaging]='true' [enableImmutableMode]='true'>
  <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='CustomerName' headerText='Customer Name' width='120'></e-column>
  </e-columns>
</ejs-grid>

注意: immutableモード機能は、データ比較の主キー値を使用します.だから、我々は価値を提供する必要がありますisPrimaryKey カラム.

Githubリファレンス
詳細についてはImmutable Rendering Mode demos .

結論
読書ありがとう!私は今あなたがimmutableレンダリングモードとSyncfusionでそれを有効にする方法の明確なアイデアを持って願っていますAngular Data Grid . この機能は、時間とDOM操作を再調整することを減らします.このブログのポストで与えられた手順を試してみて、アプリのパフォーマンスを高める!
不変のモード機能は、我々のASPでも利用できます.正味のCore , MVC ), JavaScript , Angular , React , and Vue データグリッド.
既存の顧客のために、重要なStudioの新しいバージョンは、ダウンロードから入手可能ですLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 当社の利用可能な機能をチェックアウトします.
あなたは私たちを介して私達に連絡することができますsupport forum , Direct-Trac , or feedback portal . 私たちはあなたが成功するためにここにいる!

関連ブログ