时间戳

首页 > 解决方案 > Angular Ag Grid - 单元格渲染按钮删除行？

angular - Angular Ag Grid - 单元格渲染按钮删除行？

问题描述

我在单元格中添加了一个按钮，我想将其用作行移除器。单击时必须删除该行数据并更新网格。

重新创建：https ://stackblitz.com/edit/row-delete-angular-btn-cell-renderer-y6gwdubutton?file=src%2Fapp%2Fapp.component.ts

按钮渲染组件

@Component({
  selector: "btn-cell-renderer",
  template: `
    <button (click)="btnClickedHandler($event)">DELETE!</button>
  `
})
export class BtnCellRenderer implements ICellRendererAngularComp, OnDestroy {
refresh(params: any): boolean {
throw new Error("Method not implemented.");
}
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }

  btnClickedHandler() {
    let selectedData = this.params.api.getSelectedRows();
    this.params.api.updateRowData({remove: selectedData})
  }

应用组件

@Component({
  selector: "my-app",
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100vh;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  frameworkComponents: any;
  private columnDefs;
  private defaultColDef;
  private rowData: [];

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        field: "athlete",
        cellRenderer: "btnCellRenderer",
        cellRendererParams: {
          clicked: function(field: any) {
            alert(`${field} was deleted`);
          }
        },
        minWidth: 150
      },
      {
        field: "age",
        maxWidth: 90
      },
      {
        field: "country",
        minWidth: 150
      },
      {
        field: "year",
        maxWidth: 90
      },
      {
        field: "date",
        minWidth: 150
      },
      {
        field: "sport",
        minWidth: 150
      },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" }
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 100
    };
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    };
  }

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

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }

这没有按预期工作，将不胜感激。

重新创建：https ://stackblitz.com/edit/row-delete-angular-btn-cell-renderer-y6gwdubutton?file=src%2Fapp%2Fapp.component.ts

标签： angulartypescriptag-grid-angular

解决方案

  1. 您不需要在 columnDefs 中传递的参数。你可以摆脱它。
  2. 您无需调用 getSelectedRows。参数有节点。使用它并获取数据。你只需要把它放入一个数组中。

您没有在网格上设置 rowSelection，这可能是 getSelectedRows 不起作用的原因 - 但您不想删除要删除此行的选定行。

此代码将起作用：

let selectedNode = this.params.node; 
let selectedData = selectedNode.data; 
this.params.api.updateRowData({remove: [selectedData]});

推荐阅读