Ag Grid Angular主明细网格：无数据时隐藏二级/三级嵌套网格

方法1：通过getDetailRowData判断数据并控制展开状态 #

在获取子层级数据的回调中，先检查数据是否为空，若为空则设置当前节点为收起状态，同时返回空数据集合，避免子网格渲染：

修改二级网格的getDetailRowData：

getDetailRowData: (params) => {
  const childData = params.data.States;
  if (!childData || childData.length === 0) {
    params.node.setExpanded(false);
    params.successCallback([]);
    return;
  }
  params.successCallback(childData);
}

同理修改三级网格的getDetailRowData：

getDetailRowData: (params) => {
  const childData = params.data.Regions;
  if (!childData || childData.length === 0) {
    params.node.setExpanded(false);
    params.successCallback([]);
    return;
  }
  params.successCallback(childData);
}

方法2：通过isRowMaster控制展开按钮显示 #

如果想连展开按钮都隐藏，可在各级网格的gridOptions中添加isRowMaster函数，判断当前行是否有有效子数据，无数据则不显示展开按钮：

二级网格的detailGridOptions配置示例：

detailGridOptions: {
  // 原有配置...
  isRowMaster: (dataItem) => {
    return dataItem.Regions && dataItem.Regions.length > 0;
  },
  // 原有配置...
}

三级网格的detailGridOptions配置示例：

detailGridOptions: {
  // 原有配置...
  isRowMaster: (dataItem) => {
    return dataItem.Regions && dataItem.Regions.length > 0;
  },
  // 原有配置...
}

方法3：自定义细节单元格渲染器（更灵活的控制） #

如果需要完全隐藏无数据的子网格区域，可自定义细节渲染器，判断无数据时直接隐藏渲染容器：

// 自定义细节渲染器
function CustomDetailRenderer() {}
CustomDetailRenderer.prototype.init = function(params) {
  this.eGui = document.createElement('div');
  const childData = params.data.States; // 二级网格对应States，三级替换为Regions
  if (!childData || childData.length === 0) {
    this.eGui.style.display = 'none';
    return;
  }
  // 正常渲染子网格逻辑
  const gridDiv = document.createElement('div');
  this.eGui.appendChild(gridDiv);
  new agGrid.Grid(gridDiv, params.detailGridOptions);
  params.successCallback(childData);
};
CustomDetailRenderer.prototype.getGui = function() {
  return this.eGui;
};

之后在网格的frameworkComponents中注册该渲染器，并在detailCellRendererParams里指定detailCellRenderer: 'customDetailRenderer'即可。

整合后的完整配置示例 #

public detailCellRendererParams: any = {
  // level 2 grid options
  detailGridOptions: {
    headerHeight: 0,
    columnDefs: [
      { field: 'Name', editable: true, cellRenderer: 'agGroupCellRenderer' }
    ],
    defaultColDef: {
      flex: 1,
    },
    groupDefaultExpanded: 1,
    masterDetail: true,
    detailRowHeight: 240,
    isRowMaster: (dataItem) => {
      return dataItem.Regions && dataItem.Regions.length > 0;
    },
    detailCellRendererParams: {
      // level 3 grid options
      detailGridOptions: {
        headerHeight: 0,
        columnDefs: [
          { field: 'RegionName', editable: true, cellRenderer: 'agGroupCellRenderer' },
        ],
        defaultColDef: {
          flex: 1,
        },
      },
      getDetailRowData: (params) => {
        const regions = params.data.Regions;
        if (!regions || regions.length === 0) {
          params.node.setExpanded(false);
          params.successCallback([]);
          return;
        }
        params.successCallback(regions);
      },
    } as IDetailCellRendererParams,
  },
  getDetailRowData: (params) => {
    const states = params.data.States;
    if (!states || states.length === 0) {
      params.node.setExpanded(false);
      params.successCallback([]);
      return;
    }
    params.successCallback(states);
  },
} as IDetailCellRendererParams;

内容的提问来源于stack exchange，提问作者user804401