Question

我有一个主/详细表格的农业网格。我正在尝试找到一种使详细视图中的行成为可选择状态的方法，以便删除选定的详细信息行。

在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的。我将尝试创建一个stackblitz。不过可能要花点时间，因为我以前从未做过。

Answer 1

您需要在rowSelection: 'single'而不是detailGridOptions上拥有属性defaultColDef。一旦有了它，就可以有一个按钮，它将使用detailGridInfo获得当前选定的节点。

因此，如果您添加按钮：

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

调用哪个函数

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

然后，将详细显示您选择的行。

看看this的工作插头。

如何在Ag-Grid中选择细节网格行

1 个答案: