无法使用纯 javascript 加载 ag-grid

Question

我刚刚下载了 ag-grid 并将其正确引用到我的网页中。按照 ag-grid 网站上列出的 JavaScript 示例进行操作。

我收到错误消息“无法设置属性 'cellRendererMap' 为 null” 仅供参考 - 我没有使用任何 MVC 框架。

我做错了什么？我不想让它变得复杂 - 它只是一个小的 POC。

<pre>
<html>
<h1> My new Page </h1>
<body>
<span> Hi I am a rockstar </span>

<div id="newGrid" style="height: 100%;width:500px;"></div>
<script type="text/javascript" src="/rsportal/js/ag-grid/dist/ag-grid.min.js"></script>
 <script type="text/javascript">
   var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
    ];

    var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
    ];

    var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
    };

        document.addEventListener("DOMContentLoaded", function() {
        var eGridDiv = document.querySelector('#newGrid');
        new agGrid.Grid(eGridDiv, gridOptions);
        });
</script>
</body>

</html>
</pre>

Answer 1

您是否尝试删除 DOMContentLoaded 处理程序？当 DOM 准备就绪时，您的脚本已经执行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/7.2.2/ag-grid.min.js"></script>
<div id="myGrid" style="height: 100%; height:200px;" class="ag-fresh"></div>
<script type="text/javascript">
var columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

var rowData = [
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
};

    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);

</script>

Answer 2

谢谢贝朗加。 class="ag-fresh" 解决了问题。

无法使用纯 javascript 加载 ag-grid

Cannot load ag-grid using pure javascript

javascript

ag-grid

我做错了什么？我不想让它变得复杂 - 它只是一个小的 POC。