正确使用ag-grid

巴拉

是否可以将 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/[email protected]/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>

阿戴森

查看博客显示仅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/[email protected]/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>

注意:如果您打算观看演示,那么准确地遵循它通常是明智的,并且仅在您了解后果并且实际上需要更改它们以满足您自己的项目要求的地方进行更改。就您所做的更改而言,大多数更改看起来是不必要的,包括导致问题的更改。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章