AG-Grid v33+通过CDN引入时，如何不使用CDN加载主题并在主题构建器中使用预定义主题

嗨，我来帮你搞定这个问题！先理清楚你遇到的核心问题：AG-Grid 33+弃用了直接给容器加ag-theme-xxx类名的方式，改用Theme API，但用CDN引入时，你找不到预定义的themeBalham这类主题对象对吧？

先回顾下背景 #

• AG-Grid官方确实允许通过CDN引入ag-grid-community
• v33+版本后，直接用<div class="ag-theme-balham">会触发错误，官方明确推荐使用Theme API来指定主题
• 你已经通过CDN引入了主题样式文件，但在gridOptions里直接写theme: themeBalham时，浏览器会提示找不到这个变量

解决方案：从全局agGrid对象获取预定义主题 #

通过CDN引入的AG-Grid会把所有预定义主题挂载在全局的agGrid对象下，所以你需要通过agGrid.themeBalham（对应Balham主题）这样的方式来引用，而不是直接写themeBalham。

下面是完整的可运行示例：

<!-- 先引入AG-Grid的JS，再引入基础样式和主题样式 -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-balham.min.css" rel="stylesheet">

<!-- Grid容器 -->
<div id="myGrid" style="height: 500px; width: 100%;"></div>

<script>
  // 列定义示例
  const columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];

  // 行数据示例
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  // 关键：从全局agGrid对象获取预定义主题
  const gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    theme: agGrid.themeBalham
  };

  // 初始化Grid
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
</script>

为什么之前会找不到？ #

因为CDN版本的AG-Grid是把所有API和预定义对象都封装在全局agGrid命名空间下的，不会把themeBalham直接暴露成全局变量。如果是用npm安装的模块化版本，你可以直接import { themeBalham } from 'ag-grid-community';，但CDN场景下必须通过agGrid对象来访问。

备注：内容来源于stack exchange，提问作者kando