快速上手最棒的網格框架ag-Grid

因爲對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有時候須要FQ才能訪問官網....而後document不是很是齊全(也多是api太多的緣故),以外,企業版本的price也不夠親民...

PS: aggrid結合chartjs兩個框架(一個網格, 一個圖表)相結合就能夠知足企業內部CMS之類的業務的全部需求!!

ag-Grid for webassembly ?

just kiddin, 並無webassembly的版本, 可是我認爲這是將來的趨勢, 畢竟企業版本aggrid源碼接近2m, 在數據體量>1w條時候普通配置的筆記本明顯帶不動了, 對於這種重量級的框架最好仍是上webassembly比較合適, 並且對用戶而言是徹底透明的, 不會出現兼容問題, 基於當前社區的活躍度,相信這個趨勢必定會實現的, 惟一擔心的是, 到時候咱們還能不能愉快的扣碼呢 ? (逃..