ag-grid esm.sh CDN使用示例 

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>AG Grid + esm.sh CDN 示例</title>
  </head>
  <body>
    <!-- AG Grid 容器 -->
    <div
      id="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>
posted @ 2026-04-05 00:12  卓能文  阅读(1)  评论(0)    收藏  举报