html - 即使使用 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;
}

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

Answer 1

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

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

设置 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 .

这是在您的示例中实现的最终 View (我减少了数据量以不触及 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>

如果示例容易出错，您可以找到工作示例 here在 fiddle 中