agGrid 未使用 ag-grid-community 定义

Posted 2023-03-28

【中文标题】agGrid 未使用 ag-grid-community 定义

【英文标题】：agGrid not defined using ag-grid-community

【发布时间】：2021-05-20 07:01:45

【问题描述】：

我正在尝试文档https://www.ag-grid.com/documentation/javascript/getting-started/ 中给出的演示 我收到一个错误 agGrid 未定义。我正在使用 html.erb 文件。有人可以告诉我错误是什么。 main.js

import  Grid  from 'ag-grid-community';

var columnDefs = [
   field: "make" ,
   field: "model" ,
   field: "price" 
];

// specify the data
var rowData = [
   make: "Toyota", model: "Celica", price: 35000 ,
   make: "Ford", model: "Mondeo", price: 32000 ,
   make: "Porsche", model: "Boxter", price: 72000 
];

// let the grid know which columns and what data to use
var gridOptions = 
  columnDefs: columnDefs,
  rowData: rowData
;

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() 
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
);

index.html.erb

  <div class="collections_data text-center">
     <div id="myGrid"  class="ag-theme-alpine"></div>
   </div>

【参考方案1】：

有两种方法可以解决这个问题：

将import Grid from 'ag-grid-community'; 更改为import * as agGrid from "ag-grid-community";

或

将new agGrid.Grid(gridDiv, gridOptions); 更改为new Grid(gridDiv, gridOptions);

这是一个在原版 js 中显示此内容的示例：https://stackblitz.com/edit/js-6yuwqn?file=index.js