現在市面上有大量的JavaScript數據表格控件，包括開源的第三方的和自產自銷的。可以說Wijmo的Flexgrid是目前適應Angular 2的最好的表格控件。
Angular 2數據表格基本要求: 更小、更快、更熟悉。
為了使用Angular 2表格，首先你需要了解表格的基本要求。 FlexGrid開始於1996年，當時使用C++為Visual Basic編寫的控件。多年來，它不斷進化並在多個平台得到完善，尤其是JavaScript平台。 FlexGrid 因為Flex的理念而命名，控件應當包含最需要的關鍵功能集和可擴展的能力。內置的基本功能比如：排序、分組、編輯，同時其他比較花哨的東西可以通過可選的擴展來提供。這將會保持控件的精簡和高效，同時給了客戶深度自定制的能力。
另外一個重要的指標就是性能。 FlexGrid不斷和其它產品比較，以確保我們足夠快。 Flex理念使得我們的文件足夠小（壓縮後約25K），我們對其它的框架沒有任何依賴。最顯著的性能改進是通過虛擬渲染。 FlexGrid虛擬化全部的DOM，每次只繪製需要填充視區的單元格（和一些為使滾動平滑的緩衝區）。當表格滾動，單元格（DOM元素）會被回收。虛擬渲染意味著Grid可以在1秒內綁定百萬級的數據。
最後，最重要的特點之一就是熟悉的操作。 FlexGrid基於Excel所有的交互行為，這可能是用戶最常用的操作Grid的方式了。人們希望在滾動，點擊，尤其是使用鍵盤命令（包括剪切板函數）時得到確定的行為，而不是我們自己發明的。我們模仿了Excel，因此用戶在使用我們的表格時會感覺很舒暢，令人驚奇的是，許多其它的Grid發明了它們自己的行為或者不完全支持滾動和鍵盤行為。比如當你選擇一行數據並按住向下箭頭，許多表格並不會表現出你預想的行為。
使用標記語言來聲明UI控件
現在，我們來看看在FlexGrid在AngularJS下的優勢。在AngularJS下最大的好處就是FlexGrid的標記語言：Angular組件提供了使用標記語言來聲明控件的能力。聲明標記很好地遵循了MVVM設計模式，我們可以完全通過View（標記語言）來配置我們的組件。
FlexGrid支持使用Angular標記語言來聲明完整的API。你完全可以使用標記語言設置屬性，附加事件，配置子組件（比如列）。
下面是一個例子，演示了怎樣使用Angular2標記語言來配置FlexGrid。
<wj-flex-grid [itemsSource]="data"> <wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Date'" [binding]="'date'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Revenue'" [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column> <wj-flex-grid-column [header]="'Active'" [binding]="'active'"></wj-flex-grid-column> </wj-flex-grid>
下面是我們已聲明的標記語言得到的結果。
許多其他的Grid組件僅提供了使用標記語言聲明一個控件的能力，這導致所有的配置都必須使用JavaScript（ViewModel）完成。這使View和ViewMode之間混亂不清，迫使開發者必須使用JavaScript來改變控件UI。當這麼做您將錯失Angular 綁定的所有好處。我們認為這麼做是一種反模式。看下面的不同：
<ag-grid-ng2 #agGrid // items bound to properties on the controller [gridOptions]="gridOptions" [columnDefs]="columnDefs"></ag-grid-ng2>
通過使用完全支持標記語言的組件，你可以得到完全的MVVM模式支持，像其他開發平台(ASP.NET, Java, Silverlight, Flex)一樣構建應用程序。
申明可複用的單元格類型模板
為了使用標記語言聲明任何FlexGrid成員，我們也提供了單元格模板。單元格模板是為不同類型的單元格聲明可複用模板的一種方式。單元格模板支持任何有效的Angular標記，包含綁定表達式，html和其他組件。單元格模板類型包括：標題單元格，編輯模式單元格，普通模式單元格等等。
通過單元格模板，FlexGrid提供了一個用於創建組件的表現方式。您不僅可以使用標記語言申明FlexGrid，還可以在每一個單元格中使用所有的Angular語法。讓我們看看FlexGrid單元格模板標記是多麼強大。
<wj-flex-grid [itemsSource]="data1" [allowSorting]="false" [deferResizing]="true"> <template wjFlexGridCellTemplate [cellType]="'TopLeft'" *ngIf="customTopLeft"> № </template> <template wjFlexGridCellTemplate [cellType]="'RowHeader'" *ngIf="customRowHeader" #cell="cell"> { {cell.row.index}} </template> <wj-flex-grid-column header="Country" binding="country" > <template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="customCell" #item="item"> <img src="resources/{ {item.country}}.png" /> { {item.country}} </template> <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" *ngIf="customGroupHeader" #item="item" #cell="cell"> <input type="checkbox" [(ngModel)]="cell.row.isCollapsed" /> { {item.name}} ({ {item.items.length}} items) </template> </wj-flex-grid-column> <wj-flex-grid-column header="Downloads" binding="downloads" [width]="170" [aggregate]="'Sum'"> <template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" *ngIf="customColumnHeader"> <input type="checkbox" [(ngModel)]="uiCtx.highlightDownloads" /> Downloads </template> <template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="customCell" #item="item"> <span [ngStyle]="{color: uiCtx.highlightDownloads? (item.downloads>10000 ?'green':'red'):''}" style="font-weight:700"> { {item.downloads}} </span> </template> <template wjFlexGridCellTemplate [cellType]="'Group'" *ngIf="customGroup" #cell="cell"> Sum = { {cell.value | number:'1.0-0'}} </template> </wj-flex-grid-column></wj-flex-grid>我們聲明的單元格模板得到的結果
Angular2中可複用的單元格模板
再次強調，為了在其他表格控件中實現這種效果，你需要編輯JavaScript文件，並ViewModel中編寫。
使用數據綁定自動更新控件。
我相信Angular最俱生產力的好處是綁定表達式，這允許我們創建的控件可以自動地響應數據更改，使我們從繁瑣的事件處理程序和DOM操作中解放出來。
FlexGrid所有的屬性都支持數據綁定，另外，我們還為一些需要雙向數據綁定的屬性提供雙向綁定。不需要編寫任何代碼，您就可以綁定組件以處理事件和與Model交互數據。
數據綁定在任何的開發平台（Java，.NET）都是一等公民，Angular使它變得更加容易，並且同時支持單向和雙向數據綁定。
TypeScript：與Angular 2天作之合。
FlexGrid和所有的Wijmo控件都使用TypeScript編寫。我們在Microsoft平台工作有相當長的一段歷史了，所以當TypeScript變得成熟時，我們有一種家的感覺。 TypeScript給了我們一種類似於編寫C# 的體驗：類，繼承，強類型，類型檢查，構建時錯誤檢查等等。它是我們創建企業級JavaScript控件的催化劑，就像我們在其它平台所做的，我們無需在API或語法中做任何的妥協。
也許最重要的而是，TypeScript 為我們提供了創建真正的控件而不是小部件的能力。 FlexGrid作為一個類繼承自我們的基本控件類。當小部件強迫你使用令人尷尬的函數去設置一個屬性和傳值時，FlexGrid卻有getter 和setter 訪問器，你可以直接設置他們。 Wijmo也包含一個用於簡單添加處理程序的事件模型。
如果我們的用戶選擇使用TpyeScript來開發時，將會在支持的IDE中獲得智能提示、警告，當他們嘗試分配為一個屬性分配不正確的類型時有錯誤信息。
TypeScript最吸引人的特點就是我們的客戶可以繼承並擴展我們的控件，這符合我們的Flex理念，簡化了控件自定制並減少錯誤。
最後，我們與Angular2齊頭並進。很驚喜地看到幾年前我們做出的一個決定，採用了微軟的語言。我們的控件類已經採用TypeScript，因此可以和Angular2無縫結合。我們簡單地擴展了它們並添加了元數據用來在Angular2組件中暴露它們。
不要聽信我的一面之詞：您也試試
“我們購買了Wijmo，他們的團隊做了一個偉大的工作：界面美觀；深思熟慮的架構；完善的文檔；跟進不斷變化的技術。”思科公司的BJ Jeong說。
如果我的文字沒有說服你，鼓勵你去嘗試FlexGrid，證明我的對錯。如果我錯了並且FlexGrid被別的Grid控件打敗，你可以告訴我。 20年來我們從沒有停止發展和提高，我們永遠也不會停止。立即下載進行體驗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。