ag-grid cdn使用示例

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"></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,
      };

      // 渲染表格到DOM
      document.addEventListener("DOMContentLoaded", () => {
        agGrid.LicenseManager.setLicenseKey(
          "xxx",
        );
        const gridDiv = document.querySelector("#myGrid");
        new agGrid.createGrid(gridDiv, gridOptions);
      });
    </script>
  </body>
</html>

核心说明

1. 必须引入的 CDN 资源

  1. 核心脚本：ag-grid-community.min.js（免费社区版核心功能）
  2. 核心脚本：ag-grid-enterprise.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);
};

总结

  1. 这个示例是纯前端无依赖的 AG Grid 最简用法，CDN 引入即用，无需 npm/webpack
  2. 包含了表格最常用的：列定义、数据渲染、排序、筛选、分页
  3. 容器必须设置高度，主题样式可自由切换
posted @ 2026-04-04 10:13  卓能文  阅读(1)  评论(0)    收藏  举报