即使使用 css 网格布局设置了高度，ag-grid JS 也没有显示
Posted
技术标签:
【中文标题】即使使用 css 网格布局设置了高度，ag-grid JS 也没有显示【英文标题】：ag-grid JS not showing even though height set with css grid layout 【发布时间】：2020-02-17 04:12:45 【问题描述】：我想在我的网页上的图表下方有一个ag-grid。
如果我不手动设置ag-grid 的height 属性，它不会显示在此jsFiddle 中。
我这样初始化网格：
let moves_data = res.result;
let gridOptions =
rowData: moves_data,
columnDefs: [
headerName: 'date_peak',field: 'date_peak',
headerName: 'date_through',field: 'date_through',
headerName: 'udl_peak',field: 'udl_peak',
headerName: 'udl_through',field: 'udl_through',
headerName: 'value',field: 'value',
]
;
let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
movesGrid.gridOptions.api.sizeColumnsToFit();
movesGrid.gridOptions.columnApi.autoSizeAllColumns();
html 是：
<div id="results_container">
<div id="graph-container" class="dygraph-container">
<div id="graph"></div>
</div>
<div id="results" class="ag-theme-balham" style="height:300px;"></div>
</div>
我希望解决身高问题的CSS 是：
#results_container
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 400px;
如何让ag-grid 仅使用 CSS 网格布局属性显示？如果我不能使用这些，为什么会这样？
【问题讨论】：
【参考方案1】：有几种方法可以设置网格的高度。
1- 在网格属性上设置domLayout: 'autoHeight'（这是大量行的噩梦）
当您设置 autoHeight 时，您可以为网格设置最小高度，但无法指定最大高度。
如it's documentation中所述：
当
当您在网格中设置不同数量的行时，网格将调整其高度以适合行。 由于网格高度超过了浏览器的高度，您将需要使用浏览器垂直滚动来查看数据（如果您正在查看下面嵌入的示例，则需要使用domLayout='autoHeight'时，您的应用程序不应在网格 div 上设置高度，因为应允许 div 自然流动以适应网格内容。当自动高度关闭时，您的应用程序应在网格 div 上设置高度，因为网格将填充您提供的 div。iFrames滚动）。 高度也会在您过滤时进行调整，以添加和删除行。 如果您有固定的行，网格将调整大小以适应固定的行。 不会发生垂直滚动，但水平滚动（包括固定列）将正常工作。 可以通过使用api.setDomLayout()或更改绑定属性domLayout将网格移入和移出“全高”模式。
2- 在你的脚本中设置它（比自动高度更好）：
gridOptions.api.setDomLayout('normal');
document.querySelector('#results').style.height = '400px';
3- 如果您更喜欢使用 css，您可以使用以下通用 css 规则：
.ag-theme-balham .ag-cell
height: 300px;
4- 或者，如果你喜欢使用网格布局框架，你可以找到它的例子here。
这是在您的示例中实现的最终视图（我减少了数据量以不触及 SO 字符限制的边缘）：
$(function()
let res =
"data": [
"date": "2000-01-03",
"value": 101.45
,
"date": "2000-01-04",
"value": 103.22
,
"date": "2000-01-05",
"value": 104.14
,
"date": "2000-01-06",
"value": 105.23
,
"date": "2000-01-07",
"value": 105.34
,
"date": "2000-01-10",
"value": 105.16
,
"date": "2000-01-11",
"value": 105.95
,
"date": "2000-01-12",
"value": 105.79
,
"date": "2000-01-13",
"value": 106.17
,
"date": "2000-01-14",
"value": 105.87
,
"date": "2000-01-17",
"value": 104.9
,
"date": "2000-01-18",
"value": 105.67
,
"date": "2000-01-19",
"value": 105.32
,
"date": "2000-01-20",
"value": 105.47
,
"date": "2000-01-21",
"value": 104.78
,
"date": "2000-01-24",
"value": 105.57
,
"date": "2000-01-25",
"value": 106.04
,
"date": "2000-01-26",
"value": 105.66
,
"date": "2000-01-27",
"value": 105.12
,
"date": "2000-01-28",
"value": 107.13
,
"date": "2000-01-31",
"value": 107.32
,
"date": "2000-02-01",
"value": 107.85
,
"date": "2000-02-02",
"value": 108.16
,
"date": "2000-02-03",
"value": 107.56
,
"date": "2000-02-04",
"value": 107.19
,
"date": "2000-02-07",
"value": 108.62
,
"date": "2000-02-08",
"value": 109.47
,
"date": "2000-02-09",
"value": 108.79
,
"date": "2000-02-10",
"value": 109.27
,
"date": "2000-02-11",
"value": 108.82
,
"date": "2000-02-14",
"value": 108.96
,
"date": "2000-02-15",
"value": 109.22
,
"date": "2000-02-16",
"value": 109.44
,
"date": "2000-02-17",
"value": 110.56
,
"date": "2000-02-18",
"value": 111.09
],
"result": [
"date_peak": "2000-01-13",
"date_through": "2000-01-03",
"udl_peak": 106.17,
"udl_through": 101.45,
"value": 4.652538196155742
,
"date_peak": "2000-02-02",
"date_through": "2000-01-21",
"udl_peak": 108.16,
"udl_through": 104.78,
"value": 3.2258064516129004
,
"date_peak": "2000-02-08",
"date_through": "2000-02-04",
"udl_peak": 109.47,
"udl_through": 107.19,
"value": 2.127064091799613
,
"date_peak": "2000-02-21",
"date_through": "2000-02-09",
"udl_peak": 111.26,
"udl_through": 108.79,
"value": 2.2704292673958903
,
"date_peak": "2000-03-14",
"date_through": "2000-02-24",
"udl_peak": 105.12,
"udl_through": 111.37,
"value": -5.611924216575382
,
"date_peak": "2000-03-23",
"date_through": "2000-03-14",
"udl_peak": 107.24,
"udl_through": 105.12,
"value": 2.0167427701674123
,
"date_peak": "2000-03-31",
"date_through": "2000-03-23",
"udl_peak": 102.78,
"udl_through": 107.24,
"value": -4.158895934352847
,
"date_peak": "2000-04-11",
"date_through": "2000-03-31",
"udl_peak": 106.92,
"udl_through": 102.78,
"value": 4.028021015761829
,
"date_peak": "2000-04-17",
"date_through": "2000-04-11",
"udl_peak": 104.54,
"udl_through": 106.92,
"value": -2.2259633370744436
,
"date_peak": "2000-05-03",
"date_through": "2000-04-17",
"udl_peak": 109.02,
"udl_through": 104.54,
"value": 4.285440979529365
]
let moves_data = res.result;
let gridOptions =
rowData: moves_data,
columnDefs: [
headerName: 'date_peak',
field: 'date_peak'
,
headerName: 'date_through',
field: 'date_through'
,
headerName: 'udl_peak',
field: 'udl_peak'
,
headerName: 'udl_through',
field: 'udl_through'
,
headerName: 'value',
field: 'value'
,
]
;
let movesGrid = new agGrid.Grid(document.querySelector("#results"), gridOptions);
movesGrid.gridOptions.api.sizeColumnsToFit();
movesGrid.gridOptions.columnApi.autoSizeAllColumns();
//graph with arrows
let udl_data = res.data;
let g = new Dygraph(
document.getElementById("graph"),
udl_data.map((x) =>
let res = [];
for (let col in x)
if (x.hasOwnProperty(col))
if (col.toLowerCase() === "date")
res.push(new Date(x[col]));
else
res.push(parseFloat(x[col]));
return res;
),
labels: Object.keys(udl_data[0]),
underlayCallback: (canvas, area, g) =>
moves_data.map((row) =>
let coordsA = g.toDomCoords(new Date(row.date_through), parseFloat(row.udl_through));
let coordsB = g.toDomCoords(new Date(row.date_peak), parseFloat(row.udl_peak));
let add_height = -15;
coordsA[1] += add_height;
coordsB[1] += add_height;
canvas.beginPath();
canvas.moveTo(coordsA[0], coordsA[1]);
canvas.lineTo(coordsB[0], coordsB[1]);
canvas.strokeStyle = "black";
canvas.stroke();
let radius = 5;
canvas.beginPath();
canvas.moveTo(coordsA[0], coordsA[1]);
canvas.arc(coordsA[0], coordsA[1], radius, 2 * Math.PI, Math.PI, false);
canvas.fillStyle = "green";
canvas.fill();
canvas.beginPath();
canvas.moveTo(coordsB[0], coordsB[1]);
canvas.arc(coordsB[0], coordsB[1], radius, Math.PI, 2 * Math.PI, false);
canvas.fillStyle = "red";
canvas.fill();
);
);
let the_width = $("#tabs-research-tabs-udl_move-graph-container").css("width");
$("#tabs-research-tabs-udl_move-graph").css("width", the_width);
g.resize();
).container
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50vh;
width: 100%;
#left
grid-row: 1/1;
grid-column: 1/1;
background: gray;
#results
grid-row: 1/1;
grid-column: 2/2;
overflow: hidden;
#right
grid-row: 1/1;
grid-column: 3/3;
background: gray;
<div id="results_container">
<div id="graph-container" class="dygraph-container">
<div id="legend" class="dygraph-legend"></div>
<div id="graph"></div>
</div>
<div class="container">
<div id="left"></div>
<div id="results" class="ag-theme-balham"></div>
<div id="right"></div>
</div>
</div>
<script type='text/javascript' src='http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>如果示例容易出错，您可以在 fiddle 中找到工作示例 here
【讨论】：
稍微编辑了问题以确保答案基于grid-layout CSS
感谢您抽出时间@MasLoo，但这不是我所期望的。我知道如何通过您展示的方式设置 ag-grid 的高度。但我期待它与grid-layout 框架兼容
不，它与网格布局框架不兼容。抱歉耽误您的时间。
那么问题就解决了，这仍然是有趣的信息！感谢您的帮助。
我应该收回我的话。可以实现网格布局。看看this以上是关于即使使用 css 网格布局设置了高度，ag-grid JS 也没有显示的主要内容，如果未能解决你的问题，请参考以下文章