正确使用农业网格

Question

是否可以将 Ag-Grid javascript 版本与 ASP.Net MVC 应用程序一起使用，如果是这样，请告诉我如何使用。

我尝试了 ag-grid 站点中给出的演示，AG-Grid。

但它不能与 asp.net 一起正常工作，我收到错误提示

Uncaught TypeError: Cannot read property 'match' of undefined
at e.getTheme (ag-grid.min.js:242)
at e.specialForNewMaterial (ag-grid.min.js:20)
at e.getHeaderHeight (ag-grid.min.js:20)
at e.getGroupHeaderHeight (ag-grid.min.js:20)
at t.setBodyAndHeaderHeights (ag-grid.min.js:74)
at t.init (ag-grid.min.js:74)
at ag-grid.min.js:8
at Array.forEach (<anonymous>)
at ag-grid.min.js:8
at Array.forEach (<anonymous>)

我怀疑我是否遗漏了任何其他包裹。

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

    var columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
    ];

    
    function doProcess() {
        var gridOptions = {
            rowData: rowData,
            columnDefs: columnDefs,
            onGridReady: function (params) {
                params.api.sizeColumnsToFit();
            }
        };
        new agGrid.Grid("#myGrid", gridOptions);
    }

    doProcess();

<!-- Inside the view page -->

<h2>Index</h2>

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 131px; width:600px;" ></div>

Answer 1

查看博客显示该演示中仅加载了 ag-grid.min.noStyle.js，而您也加载了 ag-grid.min.js。我猜它们是同一事物的变体，这几乎肯定是不必要的。也没有明显的需要 jQuery.

最后，也是最重要的，您创建了这样的网格：

new agGrid.Grid("#myGrid", gridOptions);

通过直接传入选择器字符串。然而，演示（毫无疑问，文档，如果你检查的话）清楚地表明传入了一个 DOM 元素，使用 document.querySelector 创建，即

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

由于您向网格传递了它不理解的内容，因此它无法向其中加载任何内容。

工作演示：

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

    var columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" }
    ];

    
    function doProcess() {
        var gridOptions = {
            rowData: rowData,
            columnDefs: columnDefs,
            onGridReady: function (params) {
                params.api.sizeColumnsToFit();
            }
        };
        var eGridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(eGridDiv, gridOptions);
    }

    doProcess();

<!-- Inside the view page -->

<h2>Index</h2>

<script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 131px; width:600px;" ></div>

N.B。如果您要遵循演示，准确地遵循它通常是明智的，并且只更改您了解后果并且实际需要更改它们以满足您自己的项目要求的地方。对于您所做的更改，大多数更改看起来都是不必要的，包括导致问题的更改。

正确使用农业网格

Using ag-grid correctly

javascript

ag-grid