即使使用 css 网格布局设置了高度，ag-grid JS 也没有显示

Question

我想在我的网页上的图表下方添加一个 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;
}

如何仅使用 CSS 网格布局属性来显示 ag-grid？如果我不能使用那些，为什么会这样？

Answer 1

有几种方法可以设置网格的高度。

1- 在网格属性上设置 domLayout: 'autoHeight'（对于大量行来说这是一场噩梦）

设置自动高度时，您可以为网格设置最小高度，但无法指定最大高度。

如it's documentation所述：

When domLayout='autoHeight' then your application should not set height on the grid div, as the div should be allowed flow naturally to fit the grid contents. When auto height is off then your application should set height on the grid div, as the grid will fill the div you provide it.

As you set different numbers of rows into the grid, the grid will resize it's height to just fit the rows.

As the grid height exceeds the height of the browser, you will need to use the browser vertical scroll to view data (or the iFrames scroll if you are looking at the example embedded below).

The height will also adjust as you filter, to add and remove rows.

If you have pinned rows, the grid will size to accommodate the pinned rows.

Vertical scrolling will not happen, however horizontal scrolling, including pinned columns, will work as normal.

It is possible to move the grid into and out of 'full height' mode by using the api.setDomLayout() or by changing the bound property 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

即使使用 css 网格布局设置了高度，ag-grid JS 也没有显示

ag-grid JS not showing even though height set with css grid layout

html

css

grid-layout

ag-grid