具有多行选择的 Ag-Grid 多行编辑答案

【问题标题】：Ag-Grid Multi-line Edit with Multi Row Selection具有多行选择的 Ag-Grid 多行编辑
【发布时间】：2021-09-03 08:26:10
【问题描述】：

我想根据所选行实现多行编辑，但不幸的是我无法在 ag-grid 文档中找到任何示例。这是Plunker链接，每当我选择行时，我在行组上都有多行复选框，所选行变得可编辑，但是当我将焦点/编辑在任何一个单元格上时，所有其他选定的可编辑行都变得正常。 ag-grid 提供此功能还是在 ag-grid 中可能？谢谢！

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
import { MenuModule } from '@ag-grid-enterprise/menu';
import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-alpine"
    [modules]="modules"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [rowSelection]="rowSelection"
    (selectionChanged)="gridRowSelectionChanged($event)"
    [groupSelectsChildren]="true"
    [suppressRowClickSelection]="true"
    [suppressAggFuncInHeader]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>`,
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  public modules: Module[] = [
    ClientSideRowModelModule,
    RowGroupingModule,
    MenuModule,
    ColumnsToolPanelModule,
  ];
  private columnDefs;
  private defaultColDef;
  private autoGroupColumnDef;
  private rowSelection;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: 'country',
        rowGroup: true,
        hide: true,
      },
      {
        field: 'gold',
        aggFunc: 'sum',
        editable: true
      },
      {
        field: 'silver',
        aggFunc: 'sum',
        editable: true
      },
      {
        field: 'bronze',
        aggFunc: 'sum',
        editable: true
      },
      {
        field: 'age',
        minWidth: 120,
        checkboxSelection: true,
        aggFunc: 'sum',
      },
      {
        field: 'year',
        maxWidth: 120,
      },
      {
        field: 'date',
        minWidth: 150,
      },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 100,
    };
    this.autoGroupColumnDef = {
      headerName: 'Athlete',
      field: 'athlete',
      minWidth: 250,
      cellRenderer: 'agGroupCellRenderer',
      cellRendererParams: { checkbox: true },
    };
    this.rowSelection = 'multiple';
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .subscribe((data) => {
        this.rowData = data;
      });
  }

  gridRowSelectionChanged(params) {
  const selectedNodes = params.api.getSelectedNodes();
    selectedNodes.forEach(node => {
      this.gridApi.startEditingCell({
        rowIndex: node.rowIndex,
        colKey: 'gold',
      });
    });
  }
}

【问题讨论】：

标签： angular ag-grid edit ag-grid-angular

【解决方案1】：

您可以使用 cellValueChanged 事件更改选定的行数据。例如，要使选定行中列的值相同，您只需要编辑 1 个单元格

https://www.ag-grid.com/angular-grid/cell-editing/#event-cell-value-changed

【讨论】：

【解决方案2】：

您可以使用网格选项suppressRowClickSelection: true 防止取消选择看看我下面的例子 https://plnkr.co/edit/1aQyW0NSpjYYPNE2?preview

【讨论】：