AG Grid 开源项目教程

2026-01-17 09:21:30作者：鲍丁臣Ursa

1. 项目的目录结构及介绍

AG Grid 是一个高性能的 JavaScript 数据表格库，支持 React、Angular、Vue 等多种框架。以下是其基本目录结构：

ag-grid/
├── dist/
│   ├── styles/
│   ├── ag-grid.js
│   ├── ag-grid.min.js
│   └── ...
├── src/
│   ├── core/
│   ├── enterprise/
│   ├── community/
│   ├── styles/
│   └── ...
├── examples/
│   ├── react/
│   ├── angular/
│   ├── vue/
│   └── ...
├── package.json
├── README.md
└── ...

目录结构介绍

dist/: 包含编译后的文件，如 ag-grid.js 和 ag-grid.min.js。
src/: 源代码目录，包含核心功能、企业版功能和社区版功能。
examples/: 示例代码，分别针对 React、Angular、Vue 等框架。
package.json: 项目的依赖和脚本配置文件。
README.md: 项目的基本介绍和使用说明。

2. 项目的启动文件介绍

AG Grid 的启动文件主要位于 dist/ 目录下，其中 ag-grid.js 和 ag-grid.min.js 是最常用的文件。以下是启动文件的介绍：

ag-grid.js: 未压缩的开发版本，包含完整的源代码和注释。
ag-grid.min.js: 压缩后的生产版本，适用于部署到生产环境。

使用示例

在 HTML 文件中引入 AG Grid：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AG Grid Example</title>
    <link rel="stylesheet" href="path/to/ag-grid.css">
    <script src="path/to/ag-grid.min.js"></script>
</head>
<body>
    <div id="myGrid" style="height: 500px; width: 100%;"></div>
    <script>
        // 初始化 AG Grid
        var gridOptions = {
            columnDefs: [
                { headerName: "Make", field: "make" },
                { headerName: "Model", field: "model" },
                { headerName: "Price", field: "price" }
            ],
            rowData: [
                { make: "Toyota", model: "Celica", price: 35000 },
                { make: "Ford", model: "Mondeo", price: 32000 },
                { make: "Porsche", model: "Boxster", price: 72000 }
            ]
        };

        new agGrid.Grid(document.getElementById('myGrid'), gridOptions);
    </script>
</body>
</html>

3. 项目的配置文件介绍

AG Grid 的配置文件主要是 package.json，其中包含了项目的依赖、脚本和其他配置信息。以下是 package.json 的主要内容：

{
  "name": "ag-grid",
  "version": "28.2.0",
  "description": "The best JavaScript Grid in the World",
  "main": "dist/ag-grid.js",
  "scripts": {
    "start": "webpack-dev-server --config config/webpack.dev.js --open",
    "build": "webpack --config config/webpack.prod.js",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "angular": "^12.0.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-dev-server": "^4.0.0",
    "jest": "^27.0.0"
  }
}