<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>AG Grid + esm.sh CDN 示例</title></head><body><!-- AG Grid 容器 --><divid="myGrid"style="height: 600px; width: 100%; max-width: 1200px; margin: 20px auto"></div><script type="module">// 1. 从 esm.sh 直接导入 AG Grid 核心import {AllCommunityModule,createGrid,ModuleRegistry,} from "https://esm.sh/ag-grid-community";// 2. 准备表格列配置const columnDefs = [{ field: "id", headerName: "ID", width: 80 },{ field: "name", headerName: "姓名", flex: 1, filter: true },{ field: "age", headerName: "年龄", width: 100, filter: true },{ field: "email", headerName: "邮箱", flex: 1.5 },{ field: "city", headerName: "城市", filter: true },];// 3. 准备模拟数据const rowData = [{id: 1,name: "张三",age: 25,email: "zhangsan@test.com",city: "北京",},{ id: 2, name: "李四", age: 30, email: "lisi@test.com", city: "上海" },{id: 3,name: "王五",age: 28,email: "wangwu@test.com",city: "广州",},{id: 4,name: "赵六",age: 35,email: "zhaoliu@test.com",city: "深圳",},{id: 5,name: "钱七",age: 22,email: "qianqi@test.com",city: "杭州",},];// 4. 表格配置项const gridOptions = {columnDefs: columnDefs,rowData: rowData,pagination: true, // 分页paginationPageSize: 20, // 每页条数rowSelection: { mode: "singleRow" }, // 单选animateRows: true, // 行动画};// 5. 初始化表格document.addEventListener("DOMContentLoaded", () => {ModuleRegistry.registerModules([AllCommunityModule]);const gridDiv = document.querySelector("#myGrid");new createGrid(gridDiv, gridOptions);});</script></body>
</html>
