是否可以在同一页面上显示两个 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 idmyGrid2并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);
}
};
});
教程.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);
}
};
});
索引.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>
您可以从以下位置获取 olympicWinner.json：https ://raw.githubusercontent.com/vadimtsushko/ag-grid/master/web/olympicWinners.json
UPDATE1：我在 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 时，它工作正常。
您遇到了范围界定问题，类似于此答案所解释的内容。由于您全局定义了所有变量，因此当您不希望它们被覆盖时，它们会被覆盖。您有两个选择来解决这个问题：
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}
];
...
})()