現在、オープンソースのサードパーティや自己生産と販売など、市場には多数のJavaScriptデータテーブルコントロールがあります。 WijmoのFlexGridは、現在Angular 2に適合している最高のテーブルコントロールであると言えます。
Angular 2データテーブルの基本要件：小さく、より速く、より馴染みのある。
Angular 2フォームを使用するには、最初にフォームの基本要件を理解する必要があります。 FlexGridは1996年にC ++で視覚的な基本のために書かれたコントロールが使用されたときに開始されました。長年にわたり、それは複数のプラットフォーム、特にJavaScriptプラットフォームで進化し、完成してきました。 FlexGridはFlexの概念のために名前が付けられており、コントロールには最も必要な重要な機能セットとスケーラブルな機能が含まれている必要があります。ソート、グループ化、編集、その他の派手なものなどの組み込みの基本機能は、オプションの拡張機能を通じて提供できます。これにより、コントロールが合理化され、効率的になり、顧客が深くカスタマイズする機能を提供します。
もう1つの重要な指標はパフォーマンスです。 FlexGridは、他の製品と常に比較して、十分な速さを確保しています。 Flex Conceptは、ファイルを十分に小さく（圧縮後約25k）、他のフレームワークに依存関係がありません。最も重要なパフォーマンスの改善は、仮想レンダリングによるものです。 FlexGridは、すべてのDOMを仮想化し、ビューポートで満たす必要があるセルのみを描画します（および一度に滑らかなスクロールするためのバッファー）。テーブルがスクロールされると、セル（DOM要素）がリサイクルされます。仮想レンダリングとは、グリッドが1秒で何百万ものデータをバインドできることを意味します。
最後に、最も重要な機能の1つは馴染みのある操作です。 FlexGridは、Excelのすべての相互作用行動に基づいています。これは、ユーザーがグリッドを操作するための最も一般的に使用される方法です。人々は、特に自分自身を発明するのではなく、キーボードコマンド（クリップボード関数を含む）を使用するとき、スクロール、クリックするときに明確な動作をしたいと考えています。ユーザーがテーブルを使用して快適に感じるようにExcelを模倣しました。驚くべきことに、他の多くのグリッドが独自の動作を発明したか、スクロールとキーボードの動作を完全にサポートしていません。たとえば、データの行を選択してダウン矢印を保持すると、多くのテーブルは期待した動作を表示しません。
マークアップ言語を使用して、UIコントロールを宣言します
次に、AngularJSのFlexGridの利点を見てみましょう。 AngularJSの最大の利点は、FlexGridのマークアップ言語です。Angularコンポーネントは、マークアップ言語を使用してコントロールを宣言する機能を提供します。宣言マーカーはMVVM設計パターンに適しています。コンポーネントを完全に視聴して構成できます（マークアップ言語）。
FlexGridは、Angular Markup言語の使用をサポートして、完全なAPIを宣言します。マークアップ言語を使用して、プロパティを設定し、イベントを添付し、サブコンポーネント（列など）を構成できます。
Angular2マークアップ言語を使用してFlexGridを構成する方法を示す例を次に示します。
<wj-flex-grid [itemssource] = "data"> <wj-flex-grid-column [header] = "'country'" [binding] = "'country'" [width] = "'*'"> </wj-flex-column> <wj-flex-grid-column] = "'' '" "" " [Binding] = "'date'"> </wj-flex-grid-column> <wj-flex-grid-column [header] = "'revenue'" "[binding] 'lument'" = "'n0'"> </wj-flex-grid-column> <wj-flex-column] [バインディング] = "'Active'"> </wj-flex-grid-column> </wj-flex-grid>
以下は、宣言したマークアップ言語から得た結果を示します。
他の多くのグリッドコンポーネントは、マークアップ言語を使用してコントロールを宣言する機能を提供するだけで、JavaScript（ViewModel）を使用して行う必要があるすべての構成が行われます。これにより、ビューとビューモードが混乱し、開発者にJavaScriptを使用してコントロールUIを変更するように強制されます。これを行うと、角度結合のすべての利点を見逃します。そうすることはアンチパターンだと思います。以下の違いを参照してください：
<ag-grid-ng2 #aggrid //コントローラーのプロパティにバインドされたアイテム[gridoptions] = "gridoptions" [columndefs] = "columndefs"> </ag-grid-ng2>
マークアップ言語を完全にサポートするコンポーネントを使用することにより、完全なMVVMパターンサポートを取得し、他の開発プラットフォーム（ASP.NET、Java、Silverlight、Flex）のようなアプリケーションを構築できます。
再利用可能なセルタイプテンプレートを宣言します
マークアップ言語を使用してFlexGridメンバーを宣言するために、セルテンプレートも提供します。セルテンプレートは、さまざまな種類のセルに対して再利用可能なテンプレートを宣言する方法です。セルテンプレートは、バウンド式、HTML、その他のコンポーネントなど、有効な角度タグをサポートしています。セルテンプレートの種類には、タイトルセル、編集モードセル、通常モードセルなどが含まれます。
セルテンプレートを介して、FlexGridはコンポーネントを作成するための表現を提供します。 FlexGridをマークアップ言語で宣言するだけでなく、すべてのセルですべての角度構文を使用することもできます。 FlexGridセルテンプレートタグがどれほど強力かを見てみましょう。
<wj-flex-grid [itemssource] = "data1" [as woldorting] = "false" [deferresizing] = "true"> <テンプレートwjflexgridcelltemplate [celltype] = "'topleft'" [cellType] = "'rowheader'" *ngif = "customrowheader"＃cell = "cell"> {{cell.row.index}} </template> <wj-flex-grid-column header = "country" binding = "country"> <template wjflexgridcelltemplate = "ngeltepe" " ＃item = "item"> <img src = "resources/{{item.country}}} type = "checkbox" [（ngmodel）] = "cell.row.iscollapsed"/> {{item.name}}（{{{{{{{{items.length}} item）</wj-flex-grid-column> <wj-flex-grid-column = "Downloads" binding "" bindings " [aggregate] = "'sum'"> <テンプレートwjflexgridcelltemplate [celltype] = "'columnheader'" *ngif = "customcolumnheader"> <入力タイプ= "チェックボックス" [（ngmodel）]] = "uictx.highlightdownloads" />ダウンロード[celltype] = "'cell'" *ngif = "customcell"＃item = "item"> <span [ngstyle] = "{color：uictx.highlightdownloads？（item.downloads> 10000？ 'green'： 'red'）： '}" style = "font-weight：700"> {emplate> wjflexgridcelltemplate [celltype] = "'group'" *ngif = "customgroup"＃cell = "cell"> sum = {{cell.value |番号： '1.0-0'}} </template> </wj-flex-grid-column> </wj-flex-grid>セルテンプレートとして宣言した結果
Angular2の再利用可能なセルテンプレート
繰り返しますが、他のテーブルコントロールでこの効果を達成するには、JavaScriptファイルを編集してViewModelに記述する必要があります。
データバインディングを使用してコントロールを自動的に更新します。
Angularの最も生産的な利点は結合式であると思います。これにより、作成したコントロールがデータの変更に自動的に対応し、退屈なイベントハンドラーとDOM操作から解放できます。
FlexGridのすべてのプロパティは、データバインディングをサポートします。さらに、双方向のデータバインディングを必要とする一部のプロパティにも双方向結合を提供します。コードを作成せずに、コンポーネントをバインドしてイベントを処理し、モデルデータと対話できます。
データバインディングは、あらゆる開発プラットフォーム（Java、.NET）の一流の市民であり、Angularはそれを容易にし、一方向と双方向のデータバインディングの両方をサポートします。
タイプスクリプト： Angularでの2日間の作業。
FlexGridおよびすべてのWijmoコントロールは、TypeScriptで記述されています。 Microsoftプラットフォームに取り組んでいるかなり長い歴史があるので、TypeScriptが成熟すると、家の感覚があります。 TypeScriptは、C＃の作成、クラス、継承、強力なタイピング、タイプチェック、ビルドタイムエラーチェックなどを書くのに似たエクスペリエンスを提供します。他のプラットフォームで行うように、エンタープライズグレードのJavaScriptコントロールを作成することは、APIや構文で妥協する必要はありません。
おそらく最も重要なことは、タイプスクリプトがウィジェットの代わりに実際のコントロールを作成する機能を提供することです。クラスとしてのFlexGridは、ベースコントロールクラスから継承されます。ウィジェットが恥ずかしい関数を使用して属性を設定し、値を合格するように強制すると、FlexGridには直接設定できるGetterおよびSetterアクセターがあります。 Wijmoには、ハンドラーを追加するためのイベントモデルも含まれています。
ユーザーが開発のためにtpyeScriptを使用することを選択した場合、サポートされているIDEでスマートプロンプトと警告を受け取り、属性に誤ったタイプを割り当てようとするとエラーメッセージが表示されます。
TypeScriptの最も魅力的な特徴は、お客様がフレックス哲学に沿ったコントロールを継承および拡張できることです。これは、制御のカスタマイズを簡素化し、エラーを削減できることです。
最後に、Angular2と密接に関連しています。数年前にMicrosoftの言語を使用して、私たちが決定した決定を見て驚いた。私たちのコントロールクラスはすでにタイプスクリプトを使用しているため、Angular2とシームレスに組み合わせることができます。単にそれらを拡張し、メタデータを追加してAngular2コンポーネントに露出しました。
私の一方的な言葉を信じないでください：また試してみてください
「私たちはWijmoを購入し、彼らのチームは素晴らしい仕事をしました。美しいインターフェース、思慮深いアーキテクチャ、よく開発されたドキュメント、テクノロジーの変化に追いついています」とCiscoのBJ Jeong氏は述べています。
私のテキストがあなたを説得しない場合は、FlexGridを試して、私を正しいか間違っているかを証明することをお勧めします。私が間違っていて、FlexGridが別のグリッドコントロールにbeatられている場合は、教えてください。私たちは20年間開発と改善を止めたことはありません。止まることはありません。今すぐダウンロードして体験してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。