【问题标题】: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 内的另一个下方
  • 嗯,你应该这么说的。稍后我会尝试调整示例
  • 我更改了答案以显示如何添加两个未嵌套的网格。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-02-24
相关资源
最近更新 更多