如何在 ag-grid 主细节设置中删除细节网格样式中的额外空间？

Question

我有一个ag-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 文档上的“简单示例”plunkr。

Answer 1

您需要做的就是参考此处的文档，至于所需的其他内容。

我们需要使用 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 示例

Answer 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 行时出现）