Question

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

我尝试了在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>)

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

＆＃13;

 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();

＆＃13;

<!-- 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>

＆＃13;

Answer 1

查看博客显示，该演示只加载了//[，而您也加载了ag-grid.min.noStyle.js。我猜他们是同一件事的变种，这几乎肯定是不必要的。此外，没有明显需要jQuery。

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

ag-grid.min.js

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

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

由于你传递了一些它不理解的网格，它无法加载任何内容。

工作演示：

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();

N.B。如果你要跟随一个演示，通常明智地遵循它，并且只改变你理解后果的东西，并且实际上需要改变它们以满足你自己的项目的要求。在您所做的更改的情况下，大多数看起来都是不必要的，包括导致问题的那个。

正确使用ag-grid

1 个答案: