最好的Angular2表格控件 最好的Angular2表格控件

最好的Angular2表格控件

如今市面上有大量的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。

1 2 3 4 5 6 7 8 9 10 11

<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>

　　下面是咱們已聲明的標記語言獲得的結果。

 

 

使用標記語言聲明FlexGrid控件

許多其餘的Grid組件僅提供了使用標記語言聲明一個控件的能力，這致使全部的配置都必須使用JavaScript（ViewModel）完成。這使View和ViewMode之間混亂不清，迫使開發者必須使用JavaScript來改變控件UI。當這麼作您將錯失Angular 綁定的全部好處。咱們認爲這麼作是一種反模式。看下面的不一樣：

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" 
  // 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"
    width="*">
    <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年來咱們從沒有中止發展和提升，咱們永遠也不會中止。當即下載進行體驗。

轉載