正確使用ag-grid

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

我懷疑是否遺漏了其他軟件包。

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

通過直接傳遞選擇器字符串。 然而，該演示（無疑是文檔，如果您對其進行了檢查）則清楚地表明，傳入了一個通過使用document.querySelector創建的DOM元素，即

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> 

注意：如果您要遵循一個演示，通常明智的做法是准確地遵循它，並且僅在了解后果的地方進行更改，並且實際上需要進行更改以滿足您自己項目的要求。 對於所做的更改，大多數更改看起來都是不必要的，包括引起問題的更改。