如何在 ag-grid 中选择细节网格

Question

我有一个主/明细形式的 ag-grid。我正在尝试找到一种方法使详细视图中的行可选，以便删除选定的详细信息行。

在 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

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

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。