由於對aggrid由衷的感謝, 又忍不住寫了一篇軟文來推廣它(其實主要是為了彌補我把enterprise版扣下來后內心的愧疚...)
ag-Grid是速度最快，功能最豐富的JavaScript datagrid組件, 沒有之一, 事實證明了它確實是業內口碑最高的框架之一
Datagrid是您在用戶界面中可能多次遇到的問題。它是一個以表格形式顯示數據的組件。數據中的每個項目都顯示為一行，分為項目字段的列。網格已經存在了很長時間，主要是在桌面上，但現在在網絡應用UI中並不常見。
今天，大多數公司和軟件工程師選擇現有的解決方案，因為與定制實施相關的復雜性和高成本。毫無疑問，大量第三方JS數據網格可用作免費或付費版本。選擇使用哪一個本身往往是一個挑戰。你是怎樣做的？
在開發人員確保網格滿足功能和性能要求之后，他們會看到集成和配置它的容易程度。此外，如果小部件附帶精心設計的文檔，這些文檔分解了所有功能並提供了示例，那么開發人員傾向於在其應用程序中使用它。
ag-Grid is ALL
ag-Grid is Everything
本文以JavaScript網格示例為特色，演示了集成和配置ag-Grid的難易程度。這是一本入門指南，旨在通過復制/粘貼在不到5分鍾的時間內完成。完成基本設置后，我們將查看控制它們的一些功能和配置選項。
讓我們開始吧！
快速上手..
在過去幾年中，我們正在目睹Cambrian Explosion of JavaScript項目設置配置。似乎每天都有人為JavaScript開發人員提供了一種新的，更好的方式來構建和分發他們的應用程序。但是，出於此設置的目的，我們將堅持使用從CDN加載ag-Grid腳本的最簡單的無構建，單個HTML文件設置。
基礎的HTML就不寫了, 將ag-Grid添加到您的項目中, extreamly easy~~
我們將從unpkg CDN加載必要的腳本和樣式。將以下內容添加到 head元素：
| < script src = “ https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js ” > </ script > | |
| < link rel = “ stylesheet ” href = “ https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css ” > | |
| < link rel = “ stylesheet ” href = “ https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css ” > |
上面的行導入 agGrid 組件，ag-grid.css 定義網格結構的 樣式表以及一個可用的網格主題 ag-theme-balham.css。
將agGrid占位符添加到HTML:
| < div id = “ myGrid ” style = “ height：500 px ; width：500 px ; ” class = “ ag-theme-balham ” > </ div > |
如您所見，它限制了網格的高度和寬度，並定義了ag-theme-balham 與我們之前導入的CSS文件名相匹配的類 。
定義配置
要實例化網格，您需要定義兩個必需的配置屬性 - 確定網格結構和數據的列定義。所以我們將這些屬性添加到 script 標記中：
| < script type = “ text / javascript ” charset = “ utf-8 ” > | |
| const columnDefs = [ | |
| {headerName ： ' Make '，field ： ' make ' }， | |
| {headerName ： ' Model '，field ： ' model ' }， | |
| {headerName ： '價格'，字段： '價格' } | |
| ]。 | |
| const rowData = [ | |
| {make ： '豐田'，型號： ' Celica '，價格： 35000 }， | |
| {make ： ' Ford '，型號： '蒙迪歐'，價格： 32000 }， | |
| {make ： '保時捷'，型號： ' Boxter '，價格： 72000 } | |
| ]。 | |
| </ script > |
在我們的例子中，列定義包含三列; 每個列條目指定要在表的主體中顯示的標題標簽和數據字段。實際數據在rowData 對象數組中定義 。請注意，對象的字段與配置對象中的field 值 匹配 columnDefs。
我們現在准備實例化網格：
| < script type = “ text / javascript ” charset = “ utf-8 ” > | |
| const gridOptions = { | |
| columnDefs ： columnDefs， | |
| rowData ： rowData | |
| }; | |
| const eGridDiv = document.querySelector（'＃myGrid '）; | |
| new agGrid.Grid（eGridDiv，gridOptions）; | |
| </ script > |
如果您現在運行該示例，您應該看到顯示的數據：
就是這樣！您剛剛將網格組件集成到您的應用程序中。現在讓我們看看在網格中配置功能是多么容易。
動態設置數據
下面我來介紹一些騷操作
在現實世界中，大多數時候，我們正在處理駐留在遠程服務器上的數據。因此，我們需要請求數據並將其提供給網格。實現這一點非常容易。
要在網格中動態更新數據，我們需要使用其API。創建網格實例時，將選項定義為對象並將其作為參數傳遞：
const gridOptions = { ... };
new agGrid.Grid(eGridDiv, gridOptions);agGrid 然后改變 options 對象並添加api 暴露大量方法的 屬性，這些方法允許我們用網格實現復雜的場景。
要動態更新數據，我們需要調用該 setRowData 方法。
gridOptions.api.setRowData(data);比如, 我們用fetch從遠程服務獲取的數據替換了 賦值。
動畫!
動畫是當今app的必備, 交互式應用不能沒有動畫, 動畫效果(常常用在過渡上)能夠完美的表達頁面元素的邏輯關系, 有一定的物理意義, 同時還能暗示用戶的一些操作.
aggrid當然完美支持動畫,對於各行各列的增刪改查都有相應的過渡動畫, 而且是GPU加速的哦
啟用功能
排序，過濾和分頁是現代網格中最常用的功能之一。 我們的應用程序沒有太多行，因此查找數據相當容易。但是，不難想象一個真實世界的應用程序如何擁有數百（甚至數十萬！）行，包含許多列。在該大小的數據集中，這些功能可幫助您放大特定的記錄集。
我們的JavaScript數據網格還提供豐富的內聯編輯體驗，因此您的用戶只需點擊幾下即可更新數據集中的任何記錄。讓我們看看我們如何啟用這些功能。
排序!
在AG-grid啟用排序其實很簡單-所有你需要做的是設置 enableSorting 於 true 在 gridOptions
添加屬性后，您應該可以通過單擊列標題對網格進行排序。每次單擊都會通過升序，降序和無排序狀態切換。
過濾!
與排序一樣，啟用過濾就像將enableFilter屬性設置 為 true.
設置此屬性后，當您將鼠標懸停在標題上時，網格將顯示一個小列菜單圖標。按下它將顯示帶有過濾UI的彈出窗口，您可以選擇過濾器類型和要過濾的文本。
ag-Grid允許輕松自定義默認過濾UI和邏輯，以實現您的自定義用例。
分頁機制!!
要在我們的JavaScript數據網格中啟用分頁，您需要做的就是將pagination 屬性 設置 true 為 gridOptions：
添加屬性后，您應該能夠使用網格底部的控件在頁面中移動
默認情況下，網格使用100個記錄的頁面大小，但可以通過配置選項輕松更改。
編輯器
要使網格可編輯，只需將 editable 屬性設置 true 為配置中的特定列定義。此列中的所有記錄都將變為可編輯狀態。
具體就不寫了
使用ag-Grid構建自己的JavaScript應用程序！
我希望這個“入門”指南清楚地向您展示了集成和配置JavaScript數據網格是多么容易。
您將親眼看到網格的快速性和可擴展性，以及它是世界上最好的JavaScript網格的原因。
加入數百萬開發人員和數千家使用ag-Grid的公司，為他們的用戶提供最佳體驗。
綜合評價
我接觸ag-grid也有半年了, 但還是沒有學會它全部的api!, 因為真的太多了,太豐富了. aggrid功能的強大程度可以說已經實現了很多自己本沒有義務去實現的功能, 比如粘貼板, 服務端數據流優化, 各種內置模塊, 對話框等,
我之前的項目在UI層面用到MDL框架, 應用上面使用aggrid, 我想用多級菜單卻發現mdl死活不支持,最后還是aggrid完美的提供了這個功能.
AGGRID的線下聚會(conf)也是源源不斷的, 雖然主要是吃喝玩樂, 但是一個以'表格''為基本的框架也有了自己的conf足以說明這個框架的體量之大!
當然也不是沒有缺點的, aggrid有時候需要翻牆才能訪問官網....然后document不是非常齊全(也可能是api太多的緣故),之外,企業版本的price也不夠親民...
PS: aggrid結合chartjs兩個框架(一個網格, 一個圖表)相結合就可以滿足企業內部CMS之類的業務的所有需求!!
ag-Grid for webassembly ?
just kiddin, 並沒有webassembly的版本, 但是我認為這是未來的趨勢, 畢竟企業版本aggrid源碼接近2m, 在數據體量>1w條時候普通配置的筆記本明顯帶不動了, 對於這種重量級的框架最好還是上webassembly比較合適, 而且對用戶而言是完全透明的, 不會出現兼容問題, 基於當前社區的活躍度,相信這個趨勢一定會實現的, 唯一擔憂的是, 到時候我們還能不能愉快的扣碼呢 ? (逃..