如何在同一页面上显示两个 ag-grid 表实例答案

【问题标题】：How to display two instances of ag-grid tables on the same page如何在同一页面上显示两个 ag-grid 表实例
【发布时间】：2017-01-31 07:06:15
【问题描述】：

是否可以在同一页面上显示两个 ag-grid 实例？就像我正在尝试这样做：

<html style="height: 100%;">

    <head lang="en">
     <meta charset="UTF-8">
        <title>Data Platform - Real Time Monitor </title>
        <script src="../dist/ag-grid-enterprise.js?ignore=notused30"></script>
        <script src="loadingGrid.js"></script>
        <script src="sortGrid.js"></script>

    </head>
<body style="height: 100%; margin: 0px;">


<div style="width: 100%; height: 100%; overflow-x:auto; overflow-y:hidden">
<div id="myGrid2" style="width: 70%; height: 50%;" class="ag-fresh">


        </div>
<div id="myGrid" style="width: 100%; height: 90%; overflow-x:scroll;" class="ag-fresh">


        </div>  
</div>      




  </body>

</html>

然后我使用此链接中的加载数据教程：https://www.ag-grid.com/ag-grid-tutorials/index.php 即，loadingGrid.js 使用 div id myGrid2 和 sortGrid.js 使用 div id myGrid。两者都有不同的表。但是只显示一个包含所有数据的表，第二个表显示空表，并且也显示第二个表的列名。如何在同一页面上显示两个 ag-grid 表？？

更新：好的，我也尝试使用 ag-grid 示例（尝试在同一页面上创建两个 ag-grid 表，但得到相同的输出。这里有所有代码： tutorial1.js:

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
    {headerName: "Age", field: "age", width: 90}

];


var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            console.log(httpResult);
        }
    };
});

tutorial.js

var columnDefs = [

    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90, unSortIcon: true},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 110},
    {headerName: "Gold", field: "gold", width: 100},
    {headerName: "Silver", field: "silver", width: 100},
    {headerName: "Bronze", field: "bronze", width: 100},
    {headerName: "Total", field: "total", width: 100}
];


var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', '../dist/olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            gridOptions.api.setRowData(httpResult);
            console.log(httpResult);
        }
    };
});

index.html:

<!DOCTYPE html>
<html style="height: 100%;">

    <head lang="en">
        <meta charset="UTF-8">

        <script src="../dist/ag-grid.js"></script>

        <script src="tutorial.js"></script>
        <script src="tutorial1.js"></script>
    </head>

    <body style="height: 100%; margin: 0px;">

        <div id="myGrid" style="width: 100%; height: 100%;" class="ag-fresh"></div>
        <div id="myGrid1" style="width: 100%; height: 100%;" class="ag-fresh"></div>
    </body>
</html>

您可以从：https://raw.githubusercontent.com/vadimtsushko/ag-grid/master/web/olympicWinners.json获取 olympicWinner.json

更新1：我在 tutorial.js 中添加了以下内容：

function buyside() {
    var filterApi = gridOptions.api.getFilterApi('Sport');
    filterApi.selectNothing();
    filterApi.selectValue('Swimming');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}

function sellside() {
    var filterApi = gridOptions.api.getFilterApi('Sport');
    filterApi.selectNothing();
    filterApi.selectValue('Gymnastics');
    //filterApi.selectValue('Great Britain');
    gridOptions.api.onFilterChanged();
}


function clearFilters() {
    gridOptions.api.setFilterModel(null);
    gridOptions.api.onFilterChanged();
}

以及 index.html 中的以下行：

<center><span style="padding-bottom: 4px; display: inline-block;">


            <button onclick="buyside()">Swimming</button>
            <button onclick="sellside()">Gymnastics</button>
            <button onclick="clearFilters()">Clear Filters</button>

        </span></center>

但是单击按钮时没有任何反应。但是，当页面上只有一个 ag-grid 时，它可以正常工作。

【问题讨论】：

所以#myGrid2 显示，但#myGrid 没有显示任何内容？
@JarodMoser 不，myGrid 显示正确，但 myGrid2 不正确。虽然形成了 myGrid2 的表格骨架，但只有 myGrid 的列标题。
查看 sortGrid.js 和 loadingGrid.js 的内容可能会很有用。我怀疑正在发生的事情是，有一些变量以某种方式从一个泄漏到另一个并被覆盖
代码很多。你想看到这一切吗？就像有一个jsp然后是2个js
重要的部分是每个网格的 gridOptions 以及将每个网格分配给 #myGrid 和 #myGrid2 的部分

标签： html jsp ag-grid

【解决方案1】：

您遇到了范围界定问题，类似于this answer explains。由于您已全局定义了所有变量，因此当您不希望它们被覆盖时，它们将被覆盖。你有两个选项来解决这个问题：

1 - 重命名 tutorial1.js 中的所有全局命名变量，以在它们后面包含数字 1（或任何你想要的），这样你就不会意外地再次重写它们。

var columnDefs1 = [
        ...
    ];


var gridOptions1 = {
    columnDefs: columnDefs1,
    ...
};


// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid1');
    new agGrid.Grid(gridDiv, gridOptions1);

    ....
});

2 - 将您的整个代码包装在自调用匿名函数中的每个文件中。这是它的样子：

(function(){
    var columnDefs = [
        {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
        {headerName: "Age", field: "age", width: 90}

    ];

    ...
})()

【讨论】：

问题：所以，我正在尝试添加过滤器，但这不起作用。请看我上面更新的代码。
既然这是一个新问题，请创建一个新问题。这将有助于保持问题的可读性，并为未来的读者保持清晰的答案。更多信息请参考this answer on the meta site。