如何在 ag-grid 主详细信息设置中删除详细网格样式中的额外空间？答案

【问题标题】：How to remove extra space in the detail grid style in ag-grid master detail setup?如何在 ag-grid 主详细信息设置中删除详细网格样式中的额外空间？
【发布时间】：2020-07-03 13:25:24
【问题描述】：

我有一个ag-grid master-detail grid，其中一个主行通常在详细信息网格中只有 1 或 2 个子行（详细信息网格总是有 2 列）。当我编写与 ag-grid 文档中的示例匹配的代码时，它总是在细节网格下留下巨大的空白，并且它会自动将细节网格的宽度扩展到容器的宽度。

我想去掉细节网格下的额外空白，并调整细节网格的大小，这样列的宽度就可以满足数据的需要。（因此细节网格的右侧会有空白）

我尝试过浏览 chrome 开发工具中的样式，但我不知道是什么控制了这两个样式方面。另外，在细节网格选项中设置domLayout = 'autoHeight'只是将细节网格的底部移动到最后一行，但在只有1个细节行的情况下并没有消除额外的空白。

Plunkr MVP（在 detail-grid 的选项中包括 domLayout = 'autoHeight'）：

反应：https://plnkr.co/edit/K76FssFF4Ex538fn

角度：https://plnkr.co/edit/0n5EllKejfyq9x4E

原始 plunkr 样本来自 ag-grid master-detail documentation 上的“简单示例”plunkr。

【问题讨论】：

标签： css ag-grid master-detail ag-grid-angular ag-grid-react

【解决方案1】：

您需要做的就是参考文档here，以了解所需的其他内容。

我们需要使用 ag-grid 文档中的这个方法。

this.getRowHeight = function(params) {
      if (params.node && params.node.detail) {
        var offset = 80;
        var allDetailRowHeight =
          params.data.callRecords.length *
          params.api.getSizesForCurrentTheme().rowHeight;
        var gridSizes = params.api.getSizesForCurrentTheme();
        return allDetailRowHeight + gridSizes.headerHeight + offset;
      }
    };

我们还需要在细节面板网格选项上添加这个属性，它会动态设置高度。

this.detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { field: 'callId' },
      {
        field: 'duration',
        valueFormatter: "x.toLocaleString() + 's'",
      }
    ],
    defaultColDef: {
      flex: 1,
      editable: true,
      resizable: true,
    },
    onGridReady: function(params) {
      params.api.setDomLayout('autoHeight');
    },
  },
  getDetailRowData: function(params) {
    params.successCallback(params.data.callRecords);
  },
};

下面是一个工作示例供您参考

Plunkr example

【讨论】：

嘿，谢谢！您的解决方案可以消除空白，但它仍然不会调整列的大小，以便它们只占用所需的最小空间，从而在右侧留下空白。我会为此做些什么？
@takanuva15 为列定义字段设置宽度，但我认为，即使您减小列宽，网格仍将保持全宽，也许使用 css 删除 ag-grid 的外边框？无论如何，这是我最好的解决方案！

【解决方案2】：

在将 Naren 的答案与一些 css 调整相结合后，这是我能得到的最佳结果。我不接受这个答案，因为这不是我想要的，但我可以忍受它，直到我（或其他人）能找到更好的答案。

https://plnkr.co/edit/d9emrRiavR9gCpQl

基本上我在 plunkr 中添加了这两件事：

this.getRowHeight = params => {
  const defRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
  if(params.node.detail) {
    const offset = 80;
    const detailRowHeight =
      params.data.callRecords.length * defRowHeight;
    var gridSizes = params.api.getSizesForCurrentTheme();
    return detailRowHeight + gridSizes.headerHeight + offset;
  } else {
    return defRowHeight;
  }
}

styles: ['::ng-deep .ag-details-row { width: 50% }']

一种可接受的解决方案是提供一种将详细信息网格的大小直接调整为实际列的宽度（而不是任意百分比）的方法

图片：

（您可以通过覆盖网格的 css 类之一的 min-height 来删除详细网格第一行下的那一点额外空间。它仅在详细网格中有 1 行时出现）

【讨论】：