ag grid下載 - ag grid原始碼下載

ag grid

其他源碼

下載

JavaScript 資料網格 | JavaScript 表

AG 網格標誌

？網站 • ？文件 • ?️ 社區

GitHub 分叉

AG Grid 是一個功能齊全且高度可自訂的JavaScript 資料網格。它提供出色的性能，沒有第三方依賴項，並支持反應, 角和維埃。

概述

JavaScript 資料網格 | JavaScript 表

企業支持
錯誤報告
問題
貢獻
工具和擴充
展示櫃
觀星者
客製化組件
主題
自訂主題
安裝
設定
種子項目
特徵
範例
？概述
⚡️ 快速入門
?️ 定制
？社群
？支援
⚠️
執照

AG Grid 有兩個版本：社群版和企業版。

ag-grid-community是免費的，可在 MIT 許可下使用，並附帶 JavaScript 資料網格所需的所有核心功能，包括排序、過濾、分頁、編輯、自訂元件、主題化等。
ag-grid-enterprise可在商業許可下使用，除了我們工程團隊的專門支援外，還具有高級功能，如整合圖表、行分組、聚合、透視、主/詳細資料、伺服器端行模型和匯出。

特徵

特徵	AG網格社區	AG網格企業
濾	✅	✅（進階）
排序	✅	✅
單元格編輯	✅	✅
CSV 匯出	✅	✅
拖放	✅	✅
主題和樣式	✅	✅
選擇	✅	✅
無障礙	✅	✅
無限滾動	✅	✅
分頁	✅	✅
伺服器端數據	✅	✅（進階）
客製化組件	✅	✅
綜合圖表	❌	✅
範圍選擇	❌	✅
行分組和聚合	❌	✅
旋轉	❌	✅
Excel匯出	❌	✅
剪貼簿操作	❌	✅
主/細節	❌	✅
樹數據	❌	✅
欄位選單	❌	✅
內容選單	❌	✅
工具面板	❌	✅
支援	❌	✅

ℹ️注意：
請造訪定價頁面進行完整比較。

範例

我們創建了多個演示來展示 AG Grid 在不同用例中的豐富功能集。請在下面查看它們的實際操作，或在我們的演示頁面上與它們互動。

金融演示

具有即時更新和迷你圖的財務數據範例：

現場演示 • 原始碼

庫存演示

查看和管理產品的庫存資料範例：

現場演示 • 原始碼

人力資源演示

顯示分層員工資料的 HR 資料範例：

現場演示 • 原始碼

⚡️ 快速入門

AG Grid 易於設定 - 您所需要做的就是提供資料並定義列結構。請繼續閱讀普通 JavaScript 安裝說明，或參閱我們的特定於框架的指南反應, 角和維埃。

安裝

$ npm install --save ag-grid-community

設定

1. 提供容器

載入AG Grid庫並建立一個容器div。 div 應該有一個高度，因為資料網格將填滿父容器的大小：

 <html lang="en"> <head> <!-- 包含 JavaScript 資料網格的所有 JS 和 CSS --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- 您的資料網格容器--> <div id="myGrid" style="height: 500px" ></div> </body></html>

2. 實例化 JavaScript 資料網格

使用createGrid在容器 div 內建立資料網格。

 // 網格選項：包含所有資料網格配置 const gridOptions = {};// 用於建立資料網格的Javascript 程式碼 const myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions) ;

3. 定義行和列

// 網格選項：包含所有資料網格配置const gridOptions = { // 行資料：要顯示的資料。    rowData: [ { make: 'Tesla', model: 'Model Y', 價格: 64950, electric: true }, { make: 'Ford', model: 'F-Series', 價格: 33850, electric: false }, { make: 'Toyota', model: 'Corolla', Price: 29600, electric: false }, ], // 欄位定義：定義要顯示的欄位。    columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }],};

ℹ️注意：
有關使用 AG Grid 建立資料網格的更多信息，請參閱我們的文件。

種子項目

我們還提供種子項目來幫助您開始使用常見配置：

環境	套餐	模組
建立 React 應用程式 (CRA)	套餐	模組
維特	套餐	模組
Vite-TypeScript	套餐	模組
Webpack 5 - TypeScript	套餐	模組
Webpack 5 - JavaScript	套餐	模組
角度 CLI	套餐	模組
努克斯特	套餐	模組
維特	套餐	模組

客製化

AG Grid 在外觀和功能方面都是完全可自訂的。可以透過多種方式自訂網格，我們提供了一系列工具來幫助建立這些自訂項目。

客製化組件

您可以建立自己的自訂元件來自訂網格的行為。例如，您可以自訂儲存格的呈現方式、值的編輯方式以及建立自己的篩選器。

您可以向網格提供多種不同的組件類型，包括：

單元格元件：自訂儲存格的內容。
標題元件：自訂列和列組的標題。
編輯元件：自訂儲存格的編輯。
過濾器元件：用於出現在列選單內的自訂列過濾器。
浮動過濾器：用於出現在列選單內的自訂列浮動過濾器。
日期元件：自訂日期篩選器中的日期選擇元件。
載入元件：使用伺服器端行模型時自訂載入單元行。
疊加組件：自訂載入和無行疊加組件。
狀態列組件：用於自訂狀態列組件。
工具面板組件：用於自訂工具面板組件。
工具提示元件：用於自訂單元格工具提示元件。
選單項目元件：自訂列和上下文選單中顯示的選單項目。

若要向網格提供自訂單元格渲染器和篩選器元件，請在gridOptions.columnDefs屬性中建立對元件的直接引用：

 gridOptions = { columnDefs: [ { field: 'country', // 將元件新增至cellRenderer 的欄位: CountryCellRenderer, // 您的自訂儲存格元件filter: CountryFilter, // 您的自訂篩選元件}, ] ,};