Question

每当用户单击特定单元格中的文本（在本例中为“名称”列）时，我都试图打开一个组件。我遇到的问题是，在Ag-Grid中没有任何方法（据我所知）允许这种方法。我相信有一种为特定单元格添加click事件的方法，但是我试图让它仅捕获单击单元格文本时的事件。有人知道我该怎么做吗？

我尝试了许多Ag-Grid方法，但是都没有单元格文本单击事件。

this.gridOptions.api.setColumnDefs([{
    headerName: "Name",
    field: "Name"
  },
  {
    headerName: "Description",
    field: "Description"
  },
  {
    headerName: "Actions",
    cellRendererFramework: ActionsRoleComponent,
    autoHeight: false,
    cellClass: 'actions-button-cell d-flex align-items-center justify-content-center',
    width: 80,
    pinned: 'right',
    suppressResize: true,
    suppressFilter: true,
    suppressSorting: true,
    suppressMovable: true,
    cellEditorFramework: ActionsRoleComponent
  }
]);
this.gridOptions.api.setRowData(receivedJson);
this.gridOptions.api.sizeColumnsToFit();

Answer 1

在为ag-Grid定制单元格渲染器时，您将需要使用Cell Renderer Componenta。

首先，在您的component.html上，包含frameworkComponents

的输入绑定

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents"
    (gridReady)="onGridReady($event)"
    .
    .
  ></ag-grid-angular>

在使用并生成ag-grid的主要组件上，您将需要导入自定义单元组件，为frameworkComponents定义属性，然后为cellRenderer提供值列定义中的特定列：

import { NameRenderer } from "./name-renderer.component";

this.columnDefs = [
  {
    headerName: "Name",
    field: "name",
    cellRenderer: "nameRenderer",
  },
  // other columns
]

this.frameworkComponents = {
  nameRenderer: NameRenderer,
};

然后在自定义单元格渲染器组件NameRenderer上绑定click事件。我不确定您会要求该单元格的哪一部分是可单击的，但是我认为您希望整个name处理点击事件

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'name-cell',
  template: `<span (click)="onClick($event)">{{ params.value }}</span>`
})

export class NameRenderer implements ICellRendererAngularComp {

  // other parts of the component

  onClick(event) {
    console.log(event);
    // handle the rest
  }

}

不要忘记在模块中包含自定义单元格渲染器组件。

import { NameRenderer } from "./name-renderer.component";

@NgModule({
  imports: [
    AgGridModule.withComponents([NameRenderer])
    // other imported stuff
  ],
  declarations: [
    NameRenderer,
    // other components
  ],
  bootstrap: [AppComponent]
})

我已经从正式的ag-grid演示中创建并创建了demo。您可以参考cube-renderer.component.ts来处理click事件。

如何使Ag-Grid单元格文本（而不是整个单元格）具有点击事件

1 个答案: