AG Grid JS CDN 完整示例（无需打包工具）
这是纯HTML + JS使用 AG Grid 的最简可运行示例，直接通过 CDN 引入样式和脚本，复制即可运行，包含基础表格、数据、列配置、排序/筛选/分页功能。
完整代码（直接复制使用）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>AG Grid CDN 示例</title><style>/* 表格容器必须设置高度 */#myGrid {height: 500px;width: 80%;margin: 20px auto;}</style>
</head>
<body><!-- 表格容器 --><div id="myGrid" class="ag-theme-alpine"></div><!-- 引入 AG Grid 核心 JS CDN --><script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise/dist/ag-grid-enterprise.min.js"></script><script>// 列默认设置const defaultColDef = {filter: true,width: 100,};// 定义表格列配置const columnDefs = [{ headerName: "ID", field: "id" },{ headerName: "姓名", field: "name" },{ headerName: "年龄", field: "age" },{ headerName: "职业", field: "job" },{ headerName: "城市", field: "city" }];// 定义表格数据const rowData = [{ id: 1, name: "张三", age: 25, job: "前端开发", city: "北京" },{ id: 2, name: "李四", age: 30, job: "后端开发", city: "上海" },{ id: 3, name: "王五", age: 28, job: "产品经理", city: "深圳" },{ id: 4, name: "赵六", age: 32, job: "测试工程师", city: "广州" },{ id: 5, name: "钱七", age: 26, job: "UI设计师", city: "杭州" }];// 初始化表格配置const gridOptions = {columnDefs: columnDefs, // 列配置defaultColDef: defaultColDef,enableAdvancedFilter: true,pagination: true, // 开启分页rowData: rowData, // 行数据sideBar: true,};// 渲染表格到DOMdocument.addEventListener('DOMContentLoaded', () => {agGrid.LicenseManager.setLicenseKey("xxx")const gridDiv = document.querySelector('#myGrid');new agGrid.createGrid(gridDiv, gridOptions);});</script>
</body>
</html>
核心说明
1. 必须引入的 CDN 资源
- 核心样式：
ag-grid.css（表格基础布局样式） - 主题样式：
ag-theme-alpine.css（AG Grid 官方主题，可替换） - 核心脚本：
ag-grid-community.min.js（免费社区版核心功能）
2. 关键配置解释
columnDefs：列定义，headerName=列名，field=数据字段，sortable/filter开启排序筛选rowData：表格数据源，JSON 数组格式pagination: true：开启分页功能- 容器必须设置高度，否则表格无法显示
进阶功能示例（可选添加）
① 动态更新数据
// 在初始化后添加新数据
gridOptions.api.setRowData([...rowData, { id: 6, name: "孙八", age: 29, job: "运维", city: "成都" }]);
② 单元格样式自定义
// 列配置中添加 cellStyle
{ headerName: "年龄", field: "age", cellStyle: { color: 'red', fontWeight: 'bold' } }
③ 选中行事件
// 初始化配置中添加
gridOptions.rowSelection = 'single'; // 单选
gridOptions.onRowSelected = (params) => {console.log("选中行数据：", params.data);
};
总结
- 这个示例是纯前端无依赖的 AG Grid 最简用法，CDN 引入即用，无需 npm/webpack
- 包含了表格最常用的：列定义、数据渲染、排序、筛选、分页
- 容器必须设置高度，主题样式可自由切换