如何在主网格内显示两个详细网格（非嵌套）答案

【问题标题】：How to display two detail grids inside a master grid (not nested)如何在主网格内显示两个详细网格（非嵌套）
【发布时间】：2022-01-26 11:11:52
【问题描述】：

AG Grid 有一个如何渲染嵌套细节网格的示例，如下图所示。

然而，我需要的是在另一个之上显示两个细节网格。

【问题讨论】：

你的意思是细节网格？
我在上面附上了一张图片，所以A1是主网格，A2是细节网格。
sry 男人。我没有给你任何答案
欢迎来到 Stack Overflow _ 看起来您正试图让某人为您编写代码，这不是本网站的用途 _ 请添加您尝试过的任何代码尝试。您还应该访问 SO 帮助中心的“提问”部分，以了解有关提交格式正确的问题的更多信息 _ 这样做将有助于确保您的帖子不会被否决 >>> stackoverflow.com/help/asking

标签： javascript ag-grid master-detail

【解决方案1】：

要显示两个未嵌套的网格，您需要按照自定义细节单元渲染器 (https://www.ag-grid.com/javascript-data-grid/master-detail-custom-detail/#example-custom-detail-with-grid) 示例进行调整以显示两个网格。

模板代码：

DetailCellRenderer.prototype.getTemplate = function () {
  var data = this.params.data;
  var template = `<div class="full-width-panel">
    <div class="full-width-grid1 ag-theme-alpine"></div>
    <div class="full-width-grid2 ag-theme-alpine"></div>
    </div>`;

  return template;
};

详细设置

DetailCellRenderer.prototype.setupDetailGrid = {
  new agGrid.Grid(eDetailGrid1, detailGridOptions1);
  new agGrid.Grid(eDetailGrid2, detailGridOptions2);

  this.detailGridApi1 = detailGridOptions1.api;
  this.detailGridApi2 = detailGridOptions2.api;

  var masterGridApi = this.params.api;
  var rowId = this.params.node.id;

  const gridInfo1 = {
    id: rowId,
    api: detailGridOptions1.api,
    columnApi: detailGridOptions1.columnApi,
  };

  const gridInfo2 = {
    id: rowId,
    api: detailGridOptions2.api,
    columnApi: detailGridOptions2.columnApi,
  };

  masterGridApi.addDetailGridInfo(`${rowId}_1`, gridInfo1);
  masterGridApi.addDetailGridInfo(`${rowId}_2`, gridInfo2);
}

细节破坏

DetailCellRenderer.prototype.destroy = function () {
  const rowId = this.params.node.id;
  const masterGridApi = this.params.api;

  masterGridApi.removeDetailGridInfo(`${rowId}_1`);
  masterGridApi.removeDetailGridInfo(`${rowId}_2`);

  this.detailGridApi1.destroy();
  this.detailGridApi2.destroy();
};

这是一个工作示例：https://plnkr.co/edit/Bj0Uf6fvTh1PEBw1

【讨论】：

在随附的屏幕截图中，A2 在 A1 内，A3 在 A2 内，但在我的情况下，A2 和 A3 应该在 A1 内的另一个下方
嗯，你应该这么说的。稍后我会尝试调整示例
我更改了答案以显示如何添加两个未嵌套的网格。