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> </正文></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, // 您的自定义过滤器组件 }, ],};