如何在 ag-grid 中使细节网格行可选

Question

我有一个 master/detail 形式的农业网格。我正在尝试找到一种方法使详细视图中的行 select 可用，这样我就可以删除 selected 详细信息行。

在 detailGridOptions 中，我尝试将 defaultColDef rowSelection 设置为 single。这似乎不起作用。不幸的是，在 ag-grid 的文档中，我找不到显示您可以在 defaultColDef 中定义的内容的参考。只有一些针对特定用例的示例，但没有总体视图。或者我只是找不到它。

我在组件中的网格定义：

this.columnDefs = [
      { headerName: 'ID', field: 'batchID', cellRenderer: 'agGroupCellRenderer' },
      { headerName: 'Erstelldatum', field: 'createDateString' },
      { headerName: 'Lagerort', field: 'storedAt' },
      { headerName: 'Materialnummer', field: 'matNumber' }
    ];

    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { headerName: "UnitID", field: 'unitID' },
          { headerName: "Eingangsdatum", field: 'entryDateString' },
          { headerName: "Ausfalldatum", field: 'failureDateString' }
        ],
        defaultColDef: {
          rowSelection: 'single',
          filter: true
        },
        onFirstDataRendered(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function (params) {
        params.successCallback(params.data.units)
      }
    }

和 html:

 <div class="row mt-3">
        <div class="col">
            <ag-grid-angular class="ag-theme-balham" style="width: 100%; height: 750px;" [rowData]="rowData$ | async"
                [columnDefs]="columnDefs" [rowSelection]="rowSelection" [masterDetail]="true"
                [detailCellRendererParams]="detailCellRendererParams" (gridReady)="onGridReady($event)"
                (selectionChanged)="onSelectionChanged($event)">
            </ag-grid-angular>
        </div>
    </div>

我输入了 filter:true 来检查它是否有效并且确实有效。所以我猜 rowSelection: 'single' 是错误的。我也试过 selectable: true.

这是网格的屏幕截图：

master/detail ag-grid

我希望能够 select 显示在内部网格内的行。具有 UnitID 的那些。我将尝试创建一个 stackblitz。不过可能需要一段时间，因为我以前从未这样做过。

Answer 1

您需要在 detailGridOptions 而不是 defaultColDef 上安装属性 rowSelection: 'single'。一旦你有了它，你就可以有一个按钮，它会使用 detailGridInfo 为你提供当前选择的节点。

因此，如果您添加一个按钮：

<button (click)="deleteSelectedRow()">Delete Selected Detail</button>

哪个函数调用：

deleteSelectedRow() {
    this.gridApi.forEachDetailGridInfo(function(detailGridApi) {
      console.log(detailGridApi.api.getSelectedRows()[0])
    });
  }

然后这将为您提供所选行的详细信息。

看看 this 工作中的 plunker。

如何在 ag-grid 中使细节网格行可选

How to make detail gridrows selectable in ag-grid

ag-grid

angular

ag-grid-angular