正确使用ag网格

Question

是否可以在ASP.Net MVC应用程序中使用Ag javascript版本，如果可以，请告诉我如何使用。

我试过在ag网格站点，AG-网格中给出的演示。

但是它对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>

​

注:如果你要跟随一个演示，它通常是明智的，它正确地遵循它，只有改变的东西，你知道的后果，实际上需要改变他们，以满足你自己的项目的要求。在您所做的更改中，大部分看起来都是不必要的，包括导致问题的原因。